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 相关文章推荐
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python协程之动态添加任务的方法
2019/02/19 Python
详解python数据结构和算法
2019/04/18 Python
简单了解django orm中介模型
2019/07/30 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
员工年终演讲稿
2014/01/03 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
JS实现九宫格拼图游戏
2022/06/28 Javascript