vue computed自动计算
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<meta charset="utf-8">
<script type="text/javascript" src="lodash.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
table,tr,th,td{border:1px solid #ccc;}
#page{width:1000px;margin:40px auto;}
#page table{width:100%;}
#page .box{
margin-top:30px;
}
</style>
</head>
<body>
<div id="page">
<table>
<tr>
<th>开始时间</th>
<th>结束时间</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td><input type="text" v-model="item.start" ></td>
<td><input type="text" v-model="item.end" ></td>
<td><input type="text" v-model="item.name" ></td>
<td><input type="text" v-model="item.age"></td>
<td><input type="text" v-model="item.sex"></td>
<td>
<button @click="add($index)">添加</button>
<button @click="remove($index)">删除</button>
</td>
</tr>
</table>
<div class="box">
{{calcRes}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#page',
data:{
list:[
{start:24,end:3223,name:'zjs',age:23,sex:'boy'}
]
},
methods:{
add:function(parm){
var obj = {start:0,end:0,name:'',age:'',sex:''};
this.list.splice(parm+1,0,obj);
},
remove:function(parm){
if(this.list.length>1){
this.list.splice(parm,1);
}else{
alert("至少有一条")
}
}
},
computed:{
calcRes:function(){
var total = [];
var days = 0;
for(var i = 0; i < this.list.length; i++){
var arr = [];
if( parseInt(this.list[i].end) - parseInt(this.list[i].start) >= 0){
this.list[i].name ? arr.push(this.list[i].name) : '';
this.list[i].age ? arr.push(this.list[i].age) : '';
this.list[i].sex ? arr.push(this.list[i].sex) : '';
if(this.list[i].name || this.list[i].age || this.list[i].sex){
total.push(_.uniq(arr).length + 1);
}
}else{
alert("第"+(i+1)+"有问题");
continue;
}
}
for(var j = 0; j < total.length; j++){
days += total[j];
}
return days;
}
},
ready:function(){
}
})
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>vue</title> <meta charset="utf-8"> <script type="text/javascript" src="lodash.min.js"></script> <script type="text/javascript" src="vue.js"></script> <style type="text/css"> *{margin:0;padding:0;} table,tr,th,td{border:1px solid #ccc;} #page{width:1000px;margin:40px auto;} #page table{width:100%;} #page .box{ margin-top:30px; } </style> </head> <body> <div id="page"> <table> <tr> <th>开始时间</th> <th>结束时间</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr v-for="item in list"> <td><input type="text" v-model="item.start" ></td> <td><input type="text" v-model="item.end" ></td> <td><input type="text" v-model="item.name" ></td> <td><input type="text" v-model="item.age"></td> <td><input type="text" v-model="item.sex"></td> <td> <button @click="add($index)">添加</button> <button @click="remove($index)">删除</button> </td> </tr> </table> <div class="box"> {{calcRes}} </div> </div> <script type="text/javascript"> new Vue({ el:'#page', data:{ list:[ {start:2423423,end:3223,name:'zjs',age:23,sex:'boy'} ] }, methods:{ add:function(parm){ var obj = {start:0,end:0,name:'',age:'',sex:''}; this.list.splice(parm+1,0,obj); }, remove:function(parm){ if(this.list.length>1){ this.list.splice(parm,1); }else{ alert("至少有一条") } } }, computed:{ calcRes:function(){ var total = []; var days = 0; for(var i = 0; i < this.list.length; i++){ var arr = []; if( parseInt(this.list[i].end) - parseInt(this.list[i].start) >= 0){ this.list[i].name ? arr.push(this.list[i].name) : ''; this.list[i].age ? arr.push(this.list[i].age) : ''; this.list[i].sex ? arr.push(this.list[i].sex) : ''; if(this.list[i].name || this.list[i].age || this.list[i].sex){ total.push(_.uniq(arr).length + 1); } } } for(var j = 0; j < total.length; j++){ days += total[j]; } return days; } }, ready:function(){ } }) </script> </body> </html>
vue computed自动计算的更多相关文章
- vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
- vuex bug & vue computed setter
vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...
- vue computed、methods、watch的区别
1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...
- Vue computed属性
computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- vue computed的执行问题
1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...
- vue computed 可以使用getter和setter
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...
- Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...
随机推荐
- 计算机网络 4.网络层与IP协议
网络中的每一台主机和路由器都有一个网络层部分.而路由器中也没有网络层以上的层次.网络层是协议栈中最复杂的层次. 转发forwarding:当一个分组到达某路由器的输入链路时.该路由器将分组移动到适当的 ...
- 在openwrt上编译一个最简单的ipk包
1 什么是opkg Opkg 是一个轻量快速的套件管理系统,目前已成为 Opensource 界嵌入式系统标准.常用于路由.交换机等嵌入式设备中,用来管理软件包的安装升级与下载. opkg updat ...
- iframe 高度宽度自适应
<iframe id="iframeHome" name="iframeHome" src="/Page/NewHome/GongZuoTai. ...
- c#.net 获取时间日期年月日时分秒生成自动文件名格式
下面是日期和时间的各种方法,转换为字符串. 如果把输出的格式改下就可以做类似的文件名了,例如:2016010110101224356.doc c#用DateTime.Now.ToString(&qu ...
- ZBrush软件特性之Material
在ZBrush中,任何物体表面的外观都是多种因素的综合结果,例如基础颜色.纹理图像投落到表面上的照明效果和材质属性.材质可以改变照明在表面上的反应,以便模型表现出光泽.凹凸.反射.金属性或透明效果.Z ...
- 6、DRN-----深度强化学习在新闻推荐上的应用
1.摘要: 提出了一种新的深度强化学习框架的新闻推荐.由于新闻特征和用户喜好的动态特性,在线个性化新闻推荐是一个极具挑战性的问题. 虽然已经提出了一些在线推荐模型来解决新闻推荐的动态特性,但是这些方法 ...
- CodeForces-1007A Reorder the Array 贪心 田忌赛马
题目链接:https://cn.vjudge.net/problem/CodeForces-1007A 题意 给个数组,元素的位置可以任意调换 问调换后的元素比此位置上的原元素大的元素个数最大多少 思 ...
- CF17E Palisection（manacher)
题意 给出一个长度为N的字符串S,问S中有多少个回文子串对(i,j)使得i,j在S中的位置相交?(N<=2*106) 题解 #include<iostream> #include&l ...
- java实现websocket 终极指南
大概思路: 首先用户登陆 获取用户信息存储到httpsession中,然后客户端链接服务端websocket,首先HandshakeInterceptor这个拦截器会拦截请求 调用 beforeH ...
- 关于Subversion主从备份方式的调整（全量、增量脚本）更新
本文引用于http://blog.chinaunix.net/uid-25266990-id-3369172.html 之前对Subversion服务器作了迁移,关于SVN的架构也走了调整,有单一的服 ...