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实现下载文件流完整前后端代码
Nov 17 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
取得传值的函数
2006/10/27 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python实现折半查找和归并排序算法
2017/04/14 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
职代会闭幕词
2015/01/28 职场文书
民事起诉状范文
2015/05/19 职场文书