地址: 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. python 比较两个yaml文件

    import yaml with open("a.yaml") as f: with open("a.yaml") as k: ): x=f.readline( ...

  2. SQL Server DATEADD() 函数及实际项目应用注意事项

    1. DATEADD() 函数的解释和语法分析 DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法: DATEADD(datepart,number,date) date 参数是合法的日 ...

  3. VC.窗口最前(置顶)

    1.Delphi7的代码 procedure TfrmMain.cbWndTopmostClick(Sender: TObject); var liExStyle :LongInt; begin // ...

  4. 事后调试.VC_资料01

    1.windows中的调试_VC语言_编程开发B1_最全面的网站教程.html(http://study.qqcf.com/web/522/98401.htm) windows中的调试 1.事后调试有 ...

  5. psql常用命令

    cmd命令 pg_ctl --version:查看pgsl版本 pg_ctl -D /xx/pgdata start:启动pgsl数据库 注:必须在环境变量中设置了PGDATA后才能省略-D参数 ,可 ...

  6. 关于ES6的一些新特性的学习

    一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...

  7. nRF52832定时器

    1概述 定时器能够被配置为两种模式:定时模式和计数模式,nrf52832有五个定时器,timer0--timer4 . 2常用得函数 函数功能:初始化定时器 ret_code_t nrf_drv_ti ...

  8. centos/redhat 删除虚拟网桥virbr0

    kvm虚拟化环境安装好后,ifconfig会发现多了一个虚拟网卡virbr0. 这是由于安装和启用了libvirt服务后生成的,libvirt在服务器(host)上生成一个  virtual netw ...

  9. 不会 tsconfig | tslint 常遇到的问题

    1. require('xx-xx') 不能用时 https://stackoverflow.com/questions/31173738/typescript-getting-error-ts230 ...

  10. word空白页怎么删除

    最简单的,直接按键盘上的BackSpace或者Delete键,来进行删除.  分页符过到.打开“编辑”-->替换-->高级-->特殊字符-->手工分页符-->“全部替换” ...