vue实现点击追加选中样式效果


Posted in Javascript onNovember 01, 2019

DOM部分

<ul>
   <li class="liMenu" 
    :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu"         
    :key="idx">{{item}}
   </li>
</ul>

JS

data(){
    return{
      menu:['首页','列表页','详情页'],
      index:0
    }
  },
  methods:{
   son(item,idx){
     this.index=idx;
   }
  }

CSS

.liMenu{
 margin-right: 20px;
 cursor:pointer;
}
.liMenu.hover{
 color:red;
}

效果:

vue实现点击追加选中样式效果

以上这篇vue实现点击追加选中样式效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue.js路由跳转详解
Aug 28 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
js中的数组对象排序分析
Dec 11 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 #Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 #Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
You might like
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
DedeCms模板安装/制作概述
2007/03/11 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解react-refetch的使用小例子
2019/02/15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
如何在python中使用selenium的示例
2017/12/26 Python
python3实现名片管理系统
2020/11/29 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
UNIX文件类型
2013/08/29 面试题
团干部培训方案
2014/06/03 职场文书
社区助残日活动总结
2014/08/29 职场文书
小学少先队活动总结
2015/05/08 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python