Vue计算机监听属性

计算机监听属性

计算机属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
计算机监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}

计算属性和监听属性的区别

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

计算机属性计算机总价
导入ajax依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

	<div id="adp">
<h3>计算机属性</h3>
				单价:<input v-model="price" />
				数量:<input v-model="num" />
				总价:{{total}}
</div>

挂载到vm

<script type="text/javascript">
	new Vue({
		el:'#adp',
		data:{
			price:16, 
			num:1,
		},
		computed:{
			total(){
				return parseInt(this.price) * parseInt(this.num);
			}
		}	
	})
	</script>
	

计算机监听属性

<div id="adp">
<h3>监听属性</h3>
km:<input v-model="km" />
m:<input v-model="m" />

</div>

挂载到vm

<script type="text/javascript">
		//作用将vue实例化挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签.边界一定是根标签
	new Vue({
		el:'#adp',
		data:{
			km:1,
			m:100
		},
		
		watch:{
			km(v){
				this.m=v*100;
			},
			m(v){
				this.km=v/100; 
			}
		}
		
	})
	</script>