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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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 用数组降低程序的时间复杂度
2009/12/04 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python 字符串常用函数详解
2019/09/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
竞聘书模板
2014/03/31 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
星级党支部申报材料
2014/05/31 职场文书
中秋手机店促销方案
2014/06/16 职场文书
个人委托书如何写
2014/09/25 职场文书
英文投诉信格式
2015/07/03 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
创业计划书之便利店
2019/09/05 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
vue递归实现树形组件
2022/07/15 Vue.js