vue-计算属性-computed
/*
计算属性:vue中对数据进行一些组合与计算的话，可以使用computed(计算属性);
//例如：获取当前日期，组合
*/
// 组合变成10-1
var vm = new Vue({
el: '#app',
data :{ },
computed:{
//默认写法是这样
time : {
return new Date().getMonth() + 1 + '-' + new Date().getDate();
},
},
});
//下面是另一种常用的写法
var vm = new Vue({
el: '#app',
data :{
month: ,
day: ,
},
computed:{
time：{
get:function(){
//默认只有get
return new Date().getMonth() + 1 + '-' + new Date().getDate();
},
set:function(value){
//在这里面可以写一些方法控制data中的值；
}
},
},
});
下面是一个全选的事例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多选操作</title>
<script src="plugins/vue/vue.js"></script>
<style>
#box{
width: 600px;
margin: 50px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
input[type="checkbox"]{
width: 17px;
height: 17px;
}
</style>
</head>
<body>
<div id="box">
<div><input type="checkbox" v-model="allcheck">全选</div>
<br>
<ul>
<li v-for="(v,index) in list">
<input type="checkbox" v-model="v.status">
<label>{{ v.name + '  ' + v.status}}</label>
</li>
</ul>
</div> <script>
var list = [
{id:1,name:"小学",status:false},
{id:2,name:"中学",status:false},
{id:3,name:"高中",status:false},
{id:4,name:"大学",status:false},
{id:5,name:"研究生",status:false},
{id:6,name:"博士",status:false}
];
var vm = new Vue({
el:'#box',
data:{
list:list
},
computed:{
allcheck:{
get:function () {
var arr = [];
arr = this.list.filter(function (item) {
return !item.status
});
if(arr.length == 0){
return true
}
console.log(arr)
},
set:function (value) {
console.log(value)
vm.list.forEach(function(item){
item.status = value;
});
value = !value
}
}
},
methods:{ }
});
</script>
</body>
</html>
vue-计算属性-computed的更多相关文章
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- Vue计算属性computed的全面解析
前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- Vue学习3：计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
随机推荐
- 解决.NET Core R1中文乱码问题
今天写了一个简单的.NET Core RC1控制台程序,发现中文显示一直是乱码.查看操作系统设置,没有问题:查看源文件编码,也没有问题:甚至查看了Console字符编码相关的注册表,依然没有发现问题. ...
- python中的字符串内置方法小结
#!/usr/local/bin/python3 # -*- coding:utf-8 -*- ''' name="my wife is mahongyan" ---------- ...
- #Python编程从入门到实践#第三章笔记
列表简介 1.什么是列表 列表:由一系列按也顶顺序排列的元素组成.元素之间可以没有任何关系. 列表:用方括号[]表示,并用逗号分隔其中元素.名称一般为复数 2.访问元素 (1)列表是有序集合 ...
- [Bzoj4408]神秘数（主席树）
Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数. 例如S={1,1,1,4,13}, 1 = 1 2 = 1+1 3 = 1+1+1 4 = 4 5 = ...
- [BZOJ3714]Kuglarz（最小生成树）
Description 魔术师的桌子上有n个杯子排成一行,编号为1,2,-,n,其中某些杯子底下藏有一个小球,如果你准确地猜出是哪些杯子,你就可以获得奖品.花费\(C_{i,j}\)元,魔术师就会告诉 ...
- mysql学习第一天select
emp.dept表 DROP TABLE IF EXISTS `dept`; CREATE TABLE `dept` ( `DEPTNO` int(2) NOT NULL, `DNAME` varch ...
- 通过Aspose.Word和ZXING生成复杂的WORD表格
1.前言 这是我之前做的一个项目中要求的功能模块,它的需求是生成一个WORD文档,需要每页一个表格并且表格中需要插入文字.条形码和二维码等信息,页数可控制.具体的效果如下图所示: 可以看到有以下几点是 ...
- BitLocker：如何启用网络解锁
TechNet 库Windows ServerWindows Server 2012 R2 和 Windows Server 2012服务器角色和技术安全和保护BitLockerBitLocker 中 ...
- 【转】Android 添加系统服务
Android系统本身提供了很多系统服务,如WindowManagerService,PowerManagerService等.下面描述一下添加一个系统服务的具体步骤. 1. 撰写一个aidl文件, ...
- express 热启动 静态文件部署 跨域解决 调试
1.热启动 每次修改app.js文件,都得重新启动项目,十分不方便.这里可以用hotnode插件实现热启动 安装:$ npm install -g hotnode 启动项目:$ hotnode app ...