zoukankan      html  css  js  c++  java
  • vue 列表选中 v-for class

    地址: 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;
    }

  • 相关阅读:
    char 转string
    博客,记忆的图谱。
    history
    openstack Icehouse发布
    数据库常用命令
    nagios
    screen
    openstack 流量控制
    sublime 3
    磁盘类型
  • 原文地址:https://www.cnblogs.com/swing07/p/8424112.html
Copyright © 2011-2022 走看看