地址: https://jsfiddle.net/50wL7mdz/96567/

列表循环,默认选择 样式控制

<script src="https://unpkg.com/vue"></script>

<div id="app">
<p @click="addItems()">{{ message }}</p>
<ul>
<li v-for="(item,i) in items" @click="selected(item,i)" ><a :class="{active:item.b}" >{{item.a}}</a></li>
</ul>
</div>

new Vue({
el: '#app',
data: {
message: 'click me',
items:[]
},
methods:{
addItems(){
this.items=[{a:'a1',b:false},{a:'a2',b:true}];
},
selected(item,i){
item.b = !item.b;
this.items.push(item);
}
}
})

.active {
background-color:#f00;
}

vue 列表选中 v-for class的更多相关文章

  1. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  2. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  3. vue列表数据倒计时存在的一些坑

    vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错. export default { data() { return { list: [] } }, mounted() { for (l ...

  4. 使用Vue.js实现列表选中效果

     实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...

  5. vue实现选中列表功能

    <template> <div> <ul v-for="prop in items"> <dt>{{prop.name}}</ ...

  6. vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)

    1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. vue实现选中效果

    前情提要 好久没有写Vue了,略有生疏,这个东西还是得多用.下午看到一个需求,选择相册图片作为轮播图显示.接口返回相册列表,用户选一下再扔回去.直到我看到e.target.className我就知道这 ...

  8. Vue列表实现滚动到指定位置样式改变

    这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...

  9. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

随机推荐

  1. appium 计算器demo

    需要修改的是 platformVersion deviceName demo: #coding=utf- from appium import webdriver import time desire ...

  2. 如何连接oracle 12c可插拔数据库

    启动根容器:[oracle@eric ~]$ export ORACLE_SID=cup[oracle@eric ~]$ sqlplus / as sysdbaSQL*Plus: Release 12 ...

  3. Oracle 12C ORA-65096: 公用用户名或角色名无效

    先说基本用法: 先按11G之前进行 conn / as sysdba; create user test identifed by test; ORA-65096: 公用用户名或角色名无效. 查官方文 ...

  4. 力扣(LeetCode) 27. 移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  5. 关于使用python.numpy的tips

    产生含有5个数字的随机向量时,注意写法 import numpy as np A=np.random.randn(5,1)   # 注意不要只写5  B=np.random.randn(5)与A不一样 ...

  6. Navicat for MySQL 查看BLOB字段内容

    转载地址:https://blog.csdn.net/lwei_998/article/details/41871329

  7. nodejs初识

    提到nodejs总离不开npm,因此首先要学些和了解npm.而对于npm.nodejs的了解都来源于菜鸟教程. nodejs学习地址:http://www.runoob.com/nodejs/node ...

  8. 三个解释——MVC的网址

    [三个MVC网址]1.https://www.cnblogs.com/sunniest/p/4555801.html2.https://www.cnblogs.com/wmyskxz/p/884846 ...

  9. Linux下编译安装MySQL

    一.环境准备yum install -y ncurses-devel libaio-develyum install -y cmake makeuseradd -s /sbin/nologin -M ...

  10. OSPF - 3,OSPF区域和LSA

    1,四种末端区域骨干区域和标准区域:1,2,3,4,5,包含5类LSA,为了减少某些普通区域的LSA(主要就是4类和5类,有时做绝到连3类也不要了),引入了末梢区域.同时为了确保数据能出去,一般ABR ...