vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作


Posted in Javascript onJuly 17, 2020

这里使用的是给被点击的li添加类名的方式

<template>
 <div class="person1">
  <div v-for="(item,index) in lists" @click="clickAdd(index)" :key="index" :class="{red:i === index}">
   <div>{{item.name}}</div>
  </div>
 </div>
</template>

<script>
export default {
 data () {
  return {
   isShow: false,
   i: null,
   lists: [
    {id: 1, name: 'rose'},
    {id: 2, name: 'mike'},
    {id: 3, name: 'jerry'}
   ]
  }
 },
 methods: {
  clickAdd (index) {
   console.log(index)
   this.i = index
  }
 },
 watch: {
 }
}
</script>

<style>
 li{
  list-style: none;
 }
 .red{
  color: red;
 }
</style>

如果想要获取lists里某条数据信息的话,直接将item传递过去即可(@click=“clickAdd(item)”)

补充知识:vue点击ul中的li显示,点击其他地方隐藏

vue点击ul中的li显示弹框,点击其他地方隐藏弹框

注意:ref="seatTipOperation"

<ul
 ref="seatTipOperation"
 v-if="seatTipOperationVisible"
>
 <li @click="handleSeatTipAdd()">添加</li>
 <li @click="handleSeatTipDelect()">删除</li>
 <li @click="handleSeatTipLock()">锁定</li>
 <li @click="handleSeatTipFillIn()">插空</li>
 <li @click="handleSeatTipSocket()">插座</li>
 <li @click="handleSeatTipSwop()">对调</li>
</ul>
handleSeatList () {
 this.seatTipOperationVisible = true
}
mounted () {
 // this的指向问题
 let that = this
 document.addEventListener('click', function (e) {
  // 这里that代表组件,this代表document
  // 冒泡也不会隐藏
  if(!that.$refs.seatTipOperation.contains(e.target)){
   that.seatTipOperationVisible = false
  }
 })
}

以上这篇vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
PHP守护进程实例
Mar 06 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Angular.JS中的this指向详解
May 17 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
Vue实现背景更换颜色操作
Jul 17 #Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 #Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
You might like
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
python八皇后问题的解决方法
2018/09/27 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
销售员试用期自我评价
2014/09/15 职场文书
离婚协议书范文2014
2014/10/16 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
SQL Server连接查询的实用教程
2021/04/07 SQL Server