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& ...
随机推荐
- bzoj2229: [Zjoi2011]最小割(分治最小割+最小割树思想)
2229: [Zjoi2011]最小割 题目:传送门 题解: 一道非常好的题目啊!!! 蒟蒻的想法:暴力枚举点对跑最小割记录...绝对爆炸啊.... 开始怀疑是不是题目骗人...难道根本不用网络流?? ...
- JAVA设计模式之【适配器模式】
适配器模式 当不需要实现一个接口所提供的所有方法时,可先设计一个抽象类该接口,并为接口每个方法提供一个默认实现 该抽象类的子类可以选择性地覆盖父类的某些方法来实现需求 角色 适配者接口 通常在接口中声 ...
- ORACLE RAC如何增加节点
ORACLE RAC系统是一个可以横向进行扩展的系统,当一个RAC系统计算能力不满足客户的需求时候,增加节点能够快速增加整个系统的计算能力,使得客户系统计算能力得到一定的提升,以满足客户不断增长的计算 ...
- 把一串数字表示成千位分隔形式——toLocaleString()
听说你用什么正则?我这有个骚操作了解下.. toLocaleString() 方法可把一个 Number 对象转换为本地格式的字符串. ().toLocaleString('en-US') " ...
- FriendlyARM交叉工具链以及编译第一个arm9应用
不记录什么都会忘光!!!这两天又要用到开发板来做项目,可是好久没有碰了,最近一直在搞上层的东东,对rails和前端感兴趣,我这是不要毕业的节奏了吗?好吧,既然什么都忘光掉了,那就干脆来个痛快,重新装机 ...
- HTML5学习笔记(一):HTML5基本概念
1.HTML的发展历程 HTML(1994年,W3C成立) HTML2(1995年) HTML3(1996年) HTML4.0(1997年) HTML4.01(1999年)——HTML5(2008年: ...
- SVN Commit报错 svn: E155037: Previous operation has not finished; run 'cleanup' if it was interrupted
svn commit 文件出错 svn: E155037: Commit failed (details follow): svn: E155037: Previous operation has n ...
- Android集成第三方微信登录
第一步: 在微信开放平台创建安卓应用,需要输入的包名和签名就不用再提吧,不知道的自行百度. 应用创建完毕后会得到两个值:AppID.AppSecret,用这两个值来请求微信. 然后去微信开放平台的资源 ...
- div内快元素[div,p。。。]居中办法
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- 【摘录】JDBC Master Slave(JDBC方式的JMS集群)
JDBC Master Slave First supported in ActiveMQ version 4.1 If you are using pure JDBC and not using t ...