用Vue.js实现全选与全不选删除功能
来源:互联网 发布:耶鲁大学法学院知乎 编辑:程序博客网 时间:2024/06/05 20:38
这是实现全选与全不选逻辑的代码,大家只要给相应的控件再加上删除逻辑就完成了全选与选不选、单选等删除功能了;这段代码经过我很多次强暴,是可以用的。
<template>
<div id="hello"><ol>
<li>
<span><input type="checkbox" v-model="selectAll"></th></span>
<span align="left">全选</span>
</li>
<li v-for="answer in answers">
<span>
<!--:value === v-bind:value=""-->
<input type="checkbox" v-model="selected" :value="answer.id" >
</span>
<span>{{ answer.name }}</span>
</li>
</ol>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'hello',
data:function() {
return{
answers: [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" },
{ "id": 3, "name": "C" },
{ "id": 4, "name": "D" }
],
selected : []
} },
computed: {
selectAll: {
get: function () {//因为在set方法中改变了全局变量selected,所以get方法会被调用
console.log("getgetget");
console.log("this.answers ? ...="+this.answers ? this.selected.length == this.answers.length : false);
console.log("this.answers="+this.answers);
console.log("this.selected.length == this.answers.length:"+this.selected.length == this.answers.length);
return this.answers ? this.selected.length == this.answers.length : false
},
set: function (value) {//点击checkbox会自动调用set方法
console.log("setsetset");
var selected = [];
console.log("value="+value);
if (value) {
this.answers.forEach(function (user) {
console.log("user="+user);
console.log("user.value="+user.value);
console.log("user.id"+user.id);
selected.push(user.id);
});
}
this.selected = selected;
}
},
selectAll2:{
get:function(){
console.log("get");
},
set:function(value){
console.log("value"+value);
}
}
}
}
</script>
<style>
</style>
阅读全文
0 0
- 用Vue.js实现全选与全不选删除功能
- vue.js实现全选和全不选
- Js实现全选与反选功能
- vue.js实现checkbox全选
- js实现全选功能
- js实现全选与全不选
- js实现全选、反选功能(批量删除)
- JS实现复选框的全选和批量删除功能
- JS实现复选框的全选和批量删除功能
- js 实现全选或全不选的功能
- js 实现全选、全不选、反选功能
- JS实现的全选/全不选功能按钮
- 用setInterval 功能实现数字时钟/实现全选与全不选
- Vue自定义指令实现checkbox全选功能
- 使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能
- JQuery实现全选与全不选功能
- Js实现repeater全选功能
- JS脚本实现全选功能
- JDK 8新特性LongAdder和AtomicLong的性能测试对比
- java核心技术卷 之泛型程序设计
- 从零一起学react(6)---props属性验证v16.0.0
- PostgreSQL在非默认的路径下创建表空间及数据库后,删除数据库目录后,还需要删除pg_tblspc下的链接文件,否则尝试启动其他实例时会报错
- iOS面试题
- 用Vue.js实现全选与全不选删除功能
- nodejs zip压缩版安装与配置
- struts2上传文件显示进度条实例---有图有代码,一看就会
- 字符串转json数组
- 51nod 1076 2条不相交的路径(边双连通分量)
- 使用Qt插件在Qt中进行ROS开发
- 设计模式学习总结
- 【产品经理三节课】第3章 需求挖掘入门
- 如何实现一个分布式RPC框架