地址: 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. 为 10000+ 业务系统提供数据可视化能力的 AntV 又进化了

    小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数 ...

  2. ones测试用例管理平台

    https://ones.ai 团队信息: 公司信息,公司logo付费信息:绑定第三方账户: 成员信息: userid,user_email,激活状态,所属部门组织架构:所属部门: 新建组 团队权钱: ...

  3. flutter安装与配置 v1.2.1版本

    1---- 上面是下载地址https://flutter.dev/docs/development/tools/sdk/archive#windows 2---- 下载后,解压安装到C盘 3--- 测 ...

  4. &&并且, ||或 , 的用法 ,区别

    &&与运算必须同时都为true才是true,如果左边为false结果肯定为false: ||或运算,只要左边为true结果一定为true,两边都为false结果才是false. 只有当 ...

  5. STL——vector

    学到STL的vector,发现手中的材料不是很详细,这里做个汇总. 1 操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> ...

  6. lambda表达式与方法重载问题

    笔者之前在学习Java8新特性的时候,最吸引我的就是lambda表达式,它无疑为Java函数编程提供了强有力的支持.lambda表达式的使用方法很简单,下面给出最简单的用法. // Interface ...

  7. HRBUST - 2358 Magic network

    HRBUST - 2358 思路:dfs序 + 树状数组 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimiz ...

  8. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  9. PHP中json数组与对象的问题

    在PHP后端,对于数组和对象的区分不是很大,主要用到的数组居多,而PHP提供接口时响应的一般是json数据(为什么使用json呢,总体来说就是体积小速度快).但是前端对数组对象很'敏感',所以对PHP ...

  10. IAR编译器

    1.在Build输出框中单击鼠标右键可以选择查看的信息,包括每个文件代码大小,数据大小,以及整个工程代码与数据大小等. 2.在IDE Options的key bingdings功能下可以查看和设置需要 ...