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

这里使用的是给被点击的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字体变红操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现导航栏点击当前标签变色功能

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • vue 的点击事件获取当前点击的元素方法

    首先 vue的点击事件 是用 @click = "clickfun()" 属性 在html中绑定的, 在点击的函数中 添加$event 参数就可以 比如 <button @click = "clickfun($event)">点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前

  • vue中v-for循环选中点击的元素并对该元素添加样式操作

    相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</

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

    这里使用的是给被点击的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

  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    前言: vue里面怎样从后台渲染列表,怎么根据文章的id获取文章的具体内容.以及值与值之间的传递,vue-router 里query和params的区别及使用. 一.query和params 先来看看query和params是怎样传值和接收参数的吧!后面会用到的哦! (1)query方式传参和接收参数 query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数 传递参数:把数据发送出去 this.$router.push({ path:'/aaa/bbb/ccc', query:{ i

  • Vue Element UI自定义描述列表组件

    Vue Element UI自定义描述列表组件

    本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下 效果图 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行

  • Vue结合Springboot实现用户列表单页面(前后端分离)

    Vue结合Springboot实现用户列表单页面(前后端分离)

    目录 用户列表页面开发 项目介绍 1.前端html页面编写 2.springboot框架搭建 2.1.项目创建 2.2.连接数据库 2.3.项目完整依赖 3.编写entity层 4.查询用户信息 4.1.后端代码编写 4.2.前端代码编写 5.添加用户信息 5.1.后端代码编写 5.2.前端代码编写 6.修改用户信息 6.1.后端代码 6.2.前端代码 7.删除用户信息 7.1.后端代码 7.2.前端代码 用户列表页面开发 项目介绍 用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信

  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="

  • Vue.js学习教程之列表渲染详解

    本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>

  • 深入理解Vue 的条件渲染和列表渲染

    这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template

  • Vue实现搜索 和新闻列表功能简单范例

    Vue实现搜索 和新闻列表功能简单范例

    效果图如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style&

  • vue如何通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

  • 深入浅析Vue.js 中的 v-for 列表渲染指令

    1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a

随机推荐