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 相关文章推荐
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
async/await地狱该如何避免详解
May 10 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP内核探索:变量概述
2014/01/30 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python获取本机外网ip的方法
2015/04/15 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
详谈python read readline readlines的区别
2017/09/22 Python
浅析Python函数式编程
2018/10/06 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
python虚拟环境迁移方法
2019/01/03 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python 实用工具状态机transitions
2020/11/21 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
附答案的Java面试题
2012/11/19 面试题
搞笑征婚广告词
2014/03/17 职场文书
中等生评语大全
2014/05/04 职场文书
红色旅游心得体会
2014/09/03 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
上课迟到检讨书
2015/05/06 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Django使用redis配置缓存的方法
2021/06/01 Redis