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 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
小程序实现上下移动切换位置
Sep 23 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
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
bootstrap Table插件使用demo
2017/08/07 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python实现简单登录验证
2016/04/13 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python getopt模块使用实例解析
2019/12/18 Python
平面设计的岗位职责
2013/11/08 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
高中毕业自我评价
2014/02/08 职场文书
心理健康日活动总结
2014/05/08 职场文书
2014年班干部工作总结
2014/11/25 职场文书
校长师德表现自我评价
2015/03/05 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js