zoukankan      html  css  js  c++  java
  • vue中v-bind:class动态添加class

    1.html代码

     <template v-for='item in names'>
         <div id="app" class="selectItem" v-bind:class="{'selected': item.Members}" v-on:click='addSelectedTagForMembers($index)'>{{item.name}}</div>
     </template>

     template中的div拿的 datanames的name,v-bind:class="{'selected': item.Members}"  的意思是  当names下的Members==true时给div的class动态添加selected

    2.selectedCSS样式

    .selected{
     background: #33baff;
    }

    3.JavaScript代码

    
    
    new Vue({
    el: '#app',
    data: {
    isA: true,
      isB: false,
    names:[
            {name:'张三三',Members:false,Leader:false},
            {name:'毛豆豆',Members:false,Leader:false},
            {name:'淘气',Members:false,Leader:false},
            {name:'二蛋',Members:false,Leader:false},
            {name:'强子',Members:false,Leader:false},
            {name:'剩下的',Members:false,Leader:false},
            {name:'小时',Members:false,Leader:false},
            {name:'豆豆',Members:false,Leader:false},
            {name:'按时',Members:false,Leader:false},
            {name:'形势下',Members:false,Leader:false}
            ]
    }
    })
     

    4.v-on:click事件代码

    addSelectedTagForMembers:function(index){
        this.names[index].Members=true;
     }
  • 相关阅读:
    软件产品案例分析(团队)
    Beta 冲刺 (2/7)
    Beta 冲刺 (1/7)
    机器学习笔记
    第一次作业
    机器学习第一个次个人作业
    软工实践个人总结
    第10组 Beta版本演示
    第10组 Beta冲刺(5/5)
    第10组 Beta冲刺(4/5)
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/5473895.html
Copyright © 2011-2022 走看看