Vue —— 观察属性
-
watch
与computed属性类似，用于观察变量的变化，然后进行相应的处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>observe_property.html</title>
<script src="../js/vue.js"></script>
</head>
<div id="example">
<p>衬衫的价格是：{{price}}元, 打完折后是:{{discount}}元, 但你需要支付:{{discount2}}元</p>
<button v-on:click="btnclick_add(1)">+</button><button @click="btnclick_sub(1)">-</button>
</div>
<body>
</body>
<script>
var one = new Vue({
el: "#example",
data: {
price: 0,
discount: 0,
discount2: 0
},
methods: {
btnclick_add: function(new_price) {
this.price += new_price;
},
btnclick_sub: function(new_price) {
this.price -= new_price;
}
},
//一般情况下使用计算属性就够了，除非某些特定条件下需要使用观察属性
//观察属性，相当于某个参数改变之后，程序自动执行。
watch: {
//watch看谁，我只盯住price这个变量，传入两个参数，一个新参数，一个旧参数
price: function(new_val, old_val) {
//控制台输出数据, 比如输出 Hello world
//console.log("Hello world");
console.log(new_val, old_val);
this.discount = this.price * 0.8;
this.discount2 = this.discount * 10;
}
}
});
//初始化价格，便于第一次就使用观察属性
one.price = 9;
</script>
</html>
