v-for并判断当前元素是否选中:$set实现响应添加属性
前言
一直纠结着使用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实现响应添加属性的更多相关文章
- JS判断是不是本页面并且,给标签添加属性和属性值
大多是在导航栏中用到的,在导航栏中在主页和在其他的网页点击导航栏中的主页是不同的,主要就是判断这个. 我是在ascs页面中写的. 下面先看标签: <a href="http://www ...
- jQuery通过判断 checkbox 元素的 checked 属性,判断 checkbox是否被选中
jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- 用jQuery判断一个元素的各种状态
用jQuery判断一个元素是否显示 用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...
- jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
- jQuery基础 -- 如何判断页面元素存在与否
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的.例如: document.getElementById(&q ...
- 判断jQuery元素是否隐藏
第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- jQuery判断当前元素是第几个元素&获取第N个元素
假设有下面这样一段HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</ ...
随机推荐
- K:HashMap中hash函数的作用
在分析了hashCode方法和equals方法之后,我们对hashCode方法和equals方法的相关作用有了大致的了解.在通过查看HashMap类的相关源码的时候,发现其中存在一个int has ...
- Head First设计模式之装饰者模式
一.定义 装饰者模式,英文叫Decorator Pattern,在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 动态将职责附加到 ...
- Linux 多线程下载工具:axel
wget 应该是最常用的下载工具了,但是其不支持多线程下载. axel 安装 epel 源有 axel 的二进制包,可以使用 yum 安装. yum install epel-release yum ...
- 基础环境之Docker入门
随着Docker技术的不断成熟,越来越多的企业开始考虑使用Docker.Docker有很多的优势,本文主要讲述了Docker的五个最重要优势,即持续集成.版本控制.可移植性.隔离性和安全性. 有了Do ...
- grpc介绍
grpc入门(一) 一.什么是grpc grpc是谷歌开源的一款高性能的rpc框架 (https://grpc.io),可以使用protocol buffers作为IDL(Interface Defi ...
- SpringMVC RequestMapping注解
1.@RequestMapping 除了修饰方法,还可以修饰类 2.类定义处:提供初步的请求映射信息.相对于WEB应用的根目录 方法处:提供进一步细分映射信息 相对于类定义处的URL.若类定义处未 ...
- Html5 移动端 触摸滑动事件
以下代码经过测试 没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...
- 基于 socket.io 的 AI 服务 杂谈
为什么会想到来聊下这个话题. 前几天在公司的项目中,开发一个基于 socket.io 的直播 IM 功能. 直播分为两部分,一部分是比较昂贵的 视频推流, 另外一部分是 IM 即时聊天服务. 从这里开 ...
- webapi框架搭建-日志管理log4net
前言 本篇讲怎么在前几篇已经创建好的项目里加上日志处理机制,我们采用Log4net技术.跟多的log4net技术的细节请查阅log4net的官网. log4net官网:http://logging.a ...
- 在React中你真的用对了Ajax吗?
通过AJAX加载初始数据 通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在component ...