Vue实现点击当前行变色


Posted in Vue.js onDecember 14, 2020

本文实例为大家分享了Vue实现点击当前行变色的具体代码,供大家参考,具体内容如下

话不多说,先上效果

Vue实现点击当前行变色

默认第一行为红色,当点击第二行的时候,只有第二行变为红色

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .active{
   color: red;;
  }
 </style>
</head>
<body>
 <div id="app">
 <ul>
 <li v-for="(item,index) in names" :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}</li>
 </ul>
 </div>
 <!-- 引入Vue -->
 <script src="vue.js"></script>
 <script>
 const app = new Vue({
 el:"#app",
 data:{
 names:['xiaoqiao','xiaosheng','xiaonan'],
 currentIndex:0
 },
 methods:{
 liClick(index){
  this.currentIndex = index
 }
 }
 })
 </script>
</body>
</html>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
You might like
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
ie focus bug 解决方法
2009/09/03 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
python不换行之end=与逗号的意思及用途
2017/11/21 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
C语言中break与continue的区别
2012/07/12 面试题
网络方面基础面试题
2012/11/16 面试题
美术教学感言
2014/02/22 职场文书
请假条的格式
2014/04/11 职场文书
会议欢迎标语
2014/06/30 职场文书
食品安全主题班会
2015/08/13 职场文书
Python合并pdf文件的工具
2021/07/01 Python