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;
     }
  • 相关阅读:
    从马琳决赛被翻盘想到的
    C语言中的位运算
    瑞星杀毒软件所有监控已禁用!
    回来了,重新开始
    使用 javascript 标记高亮关键词
    我的webgis客户端引擎AIMap
    RPM 命令大全
    终结IE6下背景图片闪烁问题
    linux下挂载硬盘光驱和U盘
    在JavaScript中实现命名空间
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/5473895.html
Copyright © 2011-2022 走看看