前言

一直纠结着使用v-for进行列表渲染时如何为当前的元素添加是否选中的标识。

1.v-for进行列表渲染

<div class="lists">
<ul>
<li class="border_first_after" v-for="(item,index) in lists" @click="isChecked(item)">
<div class="flex_parent">
<div class="lists_left">{{item.name}}</div>
<div class="flex_child lists_right">
<span class="isSelected" :class="{isChecked:item.checked}">√</span>
</div>
</div>
</li>
</ul>
</div>

附:@click=‘isChecked(item)’,变化检查问题方法,:class='{isChecked:item.checked}',为当前对象添加标识。

2.this.$set():变化检查问题

受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,

这样才能让它是响应的。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用

Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

 isChecked:function(item){
this.isLists=[];
var _this=this;
/*选中当前*/
if(typeof item.checked=='undefined'){
this.$set(item,'checked',true);
}else{
item.checked=!item.checked;
}
console.log('item:'+JSON.stringify(item)); /*判断选中个数*/
this.lists.forEach(function(item){
if(item.checked){
if(_this.isLists.length<4){
_this.isLists.push(item);
}else{
item.checked=false;
alert('最多选择4个');
}
}
});
//console.log('isLists:'+JSON.stringify(this.isLists));
}

3.汇总

 <div id="hobby">
<div class="lists">
<ul>
<li class="border_first_after" v-for="(item,index) in lists" @click="isChecked(item)">
<div class="flex_parent">
<div class="lists_left">{{item.name}}</div>
<div class="flex_child lists_right">
<span class="isSelected" :class="{isChecked:item.checked}">√</span>
</div>
</div>
</li>
</ul>
</div>
<p class="remarks">最多选择4个</p>
<div style="text-align: right">
<input class="saveBtn" type="button" value="保存" @click="save">
</div>
</div>
 /**
* Created by aaron on 2017/4/26.
*/
new Vue({
el:'#hobby',
data:{
checked:false,
isLists:[],
lists:[
{name:'亲子活动'},
{name:'体育赛事'},
{name:'DIY其他'},
{name:'多人聚会'},
{name:'慈善公益'},
{name:'周别户外'}
]
},
methods:{
isChecked:function(item){
this.isLists=[];
var _this=this;
/*选中当前*/
if(typeof item.checked=='undefined'){
this.$set(item,'checked',true);
}else{
item.checked=!item.checked;
}
console.log('item:'+JSON.stringify(item)); /*判断选中个数*/
this.lists.forEach(function(item){
if(item.checked){
if(_this.isLists.length<4){
_this.isLists.push(item);
}else{
item.checked=false;
alert('最多选择4个');
}
}
});
//console.log('isLists:'+JSON.stringify(this.isLists));
},
save:function(){
console.log('isLists:'+JSON.stringify(this.isLists));
}
}
});

4.更多

参考:vue官网:https://cn.vuejs.org/v2/guide/reactivity.html

     vue总结:https://segmentfault.com/a/1190000005832164

v-for并判断当前元素是否选中:$set实现响应添加属性的更多相关文章

  1. JS判断是不是本页面并且,给标签添加属性和属性值

    大多是在导航栏中用到的,在导航栏中在主页和在其他的网页点击导航栏中的主页是不同的,主要就是判断这个. 我是在ascs页面中写的. 下面先看标签: <a href="http://www ...

  2. jQuery通过判断 checkbox 元素的 checked 属性,判断 checkbox是否被选中

    jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...

  3. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  4. 用jQuery判断一个元素的各种状态

    用jQuery判断一个元素是否显示   用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...

  5. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  6. jQuery基础 -- 如何判断页面元素存在与否

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的.例如: document.getElementById(&q ...

  7. 判断jQuery元素是否隐藏

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被 ...

  8. jquery and js 判断一个元素是否存在

    一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...

  9. jQuery判断当前元素是第几个元素&获取第N个元素

    假设有下面这样一段HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</ ...

随机推荐

  1. 比较日期大小以及获取select选中的option的value

    原生JavaScript如何获取select选中的value // 1. 拿到select对象 const selectObject = document.getElementById('test') ...

  2. asp.net core 2.0+sqlsugar搭建个人网站系列(0)

    一些废话 马上就要过年了,回顾这一年最大的收获就是技术有了很大的提升,其他的方面没有什么改变,现在还是单身小屌丝一枚. 这一年来学习的主要重点就是asp.net core,中间也使用 core+EF做 ...

  3. Eclipse项目分组管理

    对于eclipse相信对于一个java开发人员,一定不陌生.eclipse可以通过工作空间(Workspace)将不同的项目进行分开管理,相信这一点大家一定很熟悉,用过idea的小伙伴,一定发现了,i ...

  4. 获取两个时间节点的月份列表&&每个月份的开始时间及结束时间

    //Q:从今天起之前五个月的列表 date_default_timezone_set('PRC'); $time=strtotime('-5 month'); //包含本月 $begin = strt ...

  5. 454ITS数据按barcode和primer分类程序v1.0

    不知道有什么好办法可以让primer允许漏配,现在仅仅是允许错配,还是有一些没有配上,454数据有些primer漏配了一些,下一步解决这个问题 #include <cstdio> #inc ...

  6. python简单爬虫技术

    项目中遇到这个只是点,捣鼓了半天最后没用上,但是大概对爬虫技术有了些许了解 要先 比如: #抓取网页代码 import urllib2 import json url_data = urllib2.u ...

  7. python 模块:csv

    转自:http://www.cnblogs.com/sislcb/archive/2008/12/15/1355481.html (感谢整理) 举几个例子来介绍一下,Python 的 CSV模块的使用 ...

  8. ldap命令的使用

    转自:http://blog.chinaunix.net/uid-20690190-id-4085176.html 增:ldapadd 1)选项: -x   进行简单认证 -D   用来绑定服务器的D ...

  9. kotlin的方言(语法糖)

    概述 之前介绍了kotlin的快速入门,http://www.cnblogs.com/lizo/p/7231167.html 大多数还是参照java.kotlin中提供了更多更方便的语言特性 这个方言 ...

  10. RESTful 的总结

    1.什么是RESTful? REST,即Representational State Transfer的缩写."(资源的)表现层状态转化". 2.什么是表现层? "资源& ...