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拿的 data下names的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;
}

最新文章

  1. 关于gridview里加按钮事件的总结
  2. 回归 从注释开始 appledoc
  3. C#检查标准图幅编号
  4. Struts2 Spring Hibernate等各个版本下载推荐
  5. 关于ubuntu配置静态IP 无法正常上网的解决方案
  6. SGU438 The Glorious Karlutka River =)(最大流)
  7. 从零开始学android开发-通过WebService获取今日天气情况
  8. 常见CSS注意问题
  9. MySQL REPLACE替换输出
  10. 利用DreamweaverCS5制作一个含有动态标题的教程
  11. dg error
  12. oracle的位图索引和函数索引
  13. Spring Boot入门(四):开发Web Api接口常用注解总结
  14. 【Python】 Python3 环境搭建
  15. 如何访问https的网站?-【httpclient】
  16. cocos2d-x 清空缓存
  17. 系统批量运维管理器pexpect的使用
  18. Guava包学习--Multiset
  19. uva 1203 - Argus(优先队列)
  20. 在eclipse中执行sql的编码问题

热门文章

  1. [httpserver]如何解析HTTP请求报文
  2. Java的初始化块、静态初始化块、构造函数的执行顺序及用途探究
  3. Java课程设计--山寨版QQ
  4. FineUI 基于 ExtJS 的专业 ASP.NET 控件库
  5. 百度CDN公共库
  6. React 初探
  7. 实验教学管理系统 c语言程序代写源码下载
  8. 解决xtraFinder在EI下不能使用问题
  9. 2013 ACM/ICPC Asia Regional Changsha Online&ndash;C (模拟)
  10. 住javaWeb分页实现(模拟百度首页)
  11. html进阶css(5)
  12. 3.21 采购订单导入MDS
  13. poj2728 Desert King --- 01分数规划 二分水果。。
  14. jQuery_小测试
  15. 在C++98基础上学习C++11新特性
  16. Cayley图数据库的可视化(Visualize)
  17. 解决vue解析出现闪烁
  18. systemd的日志管理进程journald
  19. react轮播图----react-slick
  20. P2152 [SDOI2009]SuperGCD 未完成