地址: 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. P1948 [USACO08JAN]电话线Telephone Lines

    传送门 思路: 二分+最短路径:可以将长度小于等于 mid 的边视为长度为 0 的边,大于 mid 的边视为长度为 1 的边,最后用 dijkstra 检查 d [ n ] 是否小于等于 k 即可. ...

  2. logback的使用

    一.logback与log4j的比较(摘自他人博客):     1.更快的实现  Logback的内核重写了,在一些关键执行路径上性能提升10倍以上.而且logback不仅性能提升了,初始化内存加载也 ...

  3. C++.运行时类型判断_测试代码

    ZC:C++ 编程思想——运行时类型识别 - 浅墨浓香 - 博客园.html(https://www.cnblogs.com/5iedu/articles/5585895.html) -------- ...

  4. PHP的session的实现机制

    一.默认机制,用磁盘文件来实现PHP会话.php.ini配置:session.save_handler = files 1.session_start() A. session_start()是ses ...

  5. Mac 如何安装 chromedriver

    1.使用brew  命令 前提是要安装 brew 这里不做介绍 使用命令 brew install chromedriver 如上图出现错误,根据提示可以使用如下命令安装 brew cask inst ...

  6. Python全栈开发-Day6-面向对象编程

    本节内容: 面向过程VS面向对象 面向对象编程介绍 类的语法 构造函数.析构函数 私有方法.私有属性 面向对象的特性:封装.继承.多态 1.面向过程 VS 面向对象 编程范式 编程是程序员用特定的语法 ...

  7. fiddler学习笔记&&基本使用

    周末在网上找了些fiddler相关的资料来看,学习下如何使用这个工具(平时接口测试用得比较多,在没有接口文档的情况下,可以通过抓包工具来提取需要测试的接口,ps.好久没写博客了,争取5月结束前再写2篇 ...

  8. JS 日期比较方法

    1.日期参数格式:yyyy-mm-dd // a: 日期a, b: 日期b, flag: 返回的结果 function duibi(a, b,flag) { var arr = a.split(&qu ...

  9. 当实体类中entity/DTO/VO等类中,有枚举值,应该怎么输出?

    当实体类中entity/DTO/VO等类中,有枚举值,应该怎么输出? 问题: orderStatus 和 payStatus都是枚举类,并且枚举的个数达地10来个,我们不可能在模板页面(jsp/ftl ...

  10. English trip M1 - AC1 My Dream Car Teacher:Corrine

    In this lesson you will learn to describe an object. 课上内容(Lesson) You want to rent a car. Go to the ...