VUE入门-计算属性以及数据监听

By：Roy.LiuLast updated：2020-09-16

vue计算属性，打个比方就如同计算器的两个加数，改变任何一个，和都会自动计算。在进行数据运算时非常方便。

vue的监听，就是监听某一个属性的值是否满足某个条件，然后触发某个响应。

如果用传统的方法，通常是在输入框的 onblur方法中去处理一些逻辑，但如果用了VUE，就只需要个方法，不需要在每个元素上绑定onblur等方法。下面的例子计算了count的和，另外在 ProductName等于 product-B 的时候，会触发watch的逻辑.

<!DOCTYPE html>
<html>
	<head>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			new Vue({
				el:"#app",
				template:`
				    <div>
						<div>
							Product Name:
							<input type="text" v-model="name" /> <br />
							Count1:
							<input type="text" v-model="count1" /> <br />
							Count2:
							<input type="text" v-model="count2" />
							Total Count: {{totalCount}} <br />
							<div v-show="showb">Show this zone when product-B is ready</div>
						</div>
					</div>
					`,
				data:function(){
					return {
						name:"product-A",
						count1:2,
						count2:3,
						showb:false
					}
				},
				computed:{
					totalCount:function() {
						return Number(this.count1) + Number(this.count2);
					}
				},
				watch:{
					name:{
						handler:function(newVal, oldVal){
							if (newVal == "product-B") {
								alert("product-B is ready");
								this.showb=true;
							} else {
								this.showb=false;
							}
						}
					}
				}
				
			})
		</script>
	</body>
</html>

From：一号门

Tags: vue

Previous:VUE入门-过滤器的使用

Next:VUE入门-组件化开发

COMMENTS

VUE入门-计算属性以及数据监听

RELATED ARTICLES

COMMENTS