Vue computed计算属性 watch侦听器

Vue computed计算属性 watch侦听器

vue 的引入 可以查看vue的官网 https://cn.vuejs.org/v2/guide/

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">     
	</head>
	<body>
		<div id='root'>
			姓:<input v-module='firstName' />
			名:<input v-module='lstsName' />
			<div>全名:{{fullName}}</div>
			<p v-show='isShow'>{{count}}</p>
			<button @click='handel'>点击</buttom>
			<ul>
				<li v-for='(item,index) of list' :key='index'>{{item}}</li>
			</ul>
		</div>
	</body>
</html>

vue js

	new Vue({
		el:'root',
		data:{
			firstName:'',
			lastName:'',
			count:0,
			isShow:true,
			list:[1,2,3]
		},
		computed:{
			//fullName为计算属
			fullName:function(){
				return this.firstName+this.lastName;
			}
		},
		watch:{
			fullName:function(){
				//监听全名变化的时候
				this.count++
			},
			firstName:function(){
				this.count++
			},
			methods:{
				handel:function(){
					this.isShow=!this.isShow;
				}
			}
		}
	})
  • computed:{} 一个属性通过其他属性计算而来
  • watch:{} 检测某一个数据或者计算属性发生的变化,一旦发生变化即可在侦听器里边写一些业务逻辑
  • v-if v-show的区别
    v-if 隐藏的时候dom元素会移除 而 v-show只是将dom元素display:none,不会移除dom元素
    如果需要对dom元素频繁的展示隐藏,到底是用v-if好还是用v-show好呢?
    当然是用v-show 因为v-show不会销毁dom元素再创建dom元素
    如果dom元素显示隐藏的频率没那么大,用v-if则性能消耗没那么大
  • v-for
<ul>
	<li v-for='(item,index) of list' :key='index'>{{item}}</li>
</ul>
  • 每一项的内容放在item中去,每一项的下标放到index中
  • 使用v-for的时候要加上 :key 的属性会提升每一项渲染的效率 key循环的值要唯一
posted @ 2018-07-03 10:52  桃子前端攻城师  阅读(75)  评论(0)    收藏  举报