<!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自动计算的更多相关文章

  1. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

  2. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  3. vuex bug & vue computed setter

    vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...

  4. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  5. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  6. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  7. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...

  8. vue computed 可以使用getter和setter

    var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

  9. Vue -computed传参数

    vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...

随机推荐

  1. Android学习路线（十三）Activity生命周期——暂停和恢复（Pausing and Resuming ）一个Activity

    在正常使用应用的过程中.前台的activity在一些时候会被其它的组件遮挡,导致这个activity暂停.举个样例.当一个半透明的activity被打开(比如一个dialog样式的activity), ...

  2. swift -函数、函数指针

    // // main.swift // FunctionTest-04 // import Foundation println("函数測试!") testFunction() / ...

  3. 关于输入getline

    此函数可读取整行,包括前导和嵌入的空格,并将其存储在字符串对象中. getline 函数如下所示: getline(cin, inputLine); 其中 cin 是正在读取的输入流,而 inputL ...

  4. BZOJ 2194 FFT

    思路: 题目中给的是差值一定的 那么就把b数组倒一下 不就变成 i+j=k(k为定值的了嘛) 嗯 然后搞个FFT //By SiriusRen #include <cstdio> #inc ...

  5. Microsoft Edge 针对 Web 开发人员更新日志

    Windows 10 build16215 之 Edge 新功能 新功能: 增加了对高级事件监听器的支持(“once”和“passive”)via 增加了对CSS object-fit/object- ...

  6. Android ViewPager系列之ViewPager一屏显示多个子页面

    ViewPager一屏显示多个子页面,常见的有两种形式: 1.当前展示的页面右侧显示一部分下个页面的内容 2.当前页面居中,左右两边分别显示上一个页面.下一个页面 第 1 种表现形式的实现代码 其实这 ...

  7. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  8. 如何防止js刷新页面后倒计时改变

    1.存入cookie或localstorage(清除浏览器缓存后时间依然改变) 2.存入数据库

  9. 解决Windows下git需要每次都要ssh-add的问题

    顽皮的很: 不知道怎么回事,每次打开git提交代码都需要ssh-add一下秘钥才可以正常提交: 不然就报错权限之类的问题: 怎么才能更方便一些? 卸了重装!我没试... 再或者是在 git 的安装目录 ...

  10. Django------->>>modle

    import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "modletest.settings") ...