码迷,mamicode.com
首页 > 其他好文 > 详细

vue-学习笔记2

时间:2017-05-19 18:34:13      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:基于   for   class   function   logs   数据   turn   计算属性   box   

1、计算属性

对于较复杂的逻辑可以使用计算属性

<div id=‘box‘>
	<p>
		<label for="name">名字</label>
		<input type="text" id="name" v-model="name">
	</p>
	<p>
		<label for="age">年龄</label>
		<input type="text" id="age" v-model="age">
	</p>
	<p>{{intro}}</p>
	
</div>
var vm = new Vue({
	el:"#box",
  	data:{
		age:‘‘,
		name:‘‘
	},
	computed:{
		intro:function(){
			if(this.age && this.name)
			return ‘你的名字是‘+this.name+‘,今年是‘+this.age+‘岁~‘
		}
	}
});

  计算属性intro,依赖着age和name,当两个中的任何一个值发生改变,都会导致intro中文字变化。

计算属性 VS 方法

使用方法也能实现,只是计算属性是基于它的依赖进行缓存的。只有它的相关依赖发生改变时才会重新求值。

计算属性 VS watch属性

vue提供一种更通用的方式来观察和响应vue实例上的数据变动 , watch选项,来相应数据的变化。主要用于在数据变化响应时,执行异步操作或开销较大的操作

 

vue-学习笔记2

标签:基于   for   class   function   logs   数据   turn   计算属性   box   

原文地址:http://www.cnblogs.com/tiantianxiangshang33/p/6879655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!