-
set and get
設置計算屬性，同步更新元數據的值
<!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>set_caculate_property.html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
<p>襯衫的價格是：{{price}}元, 打完折后是:{{discount}}元</p>
<button @click="btnclick(100)">恢復平價</button><button @click="btnclick_add(50)">加價</button>
</div>
</body>
<script>
//匿名對象
new Vue({ el: "#example", //屬性數據
data: { price: 300 }, //觸發事件
methods: { btnclick: function(new_price) { this.price = new_price; }, btnclick_add: function(new_price) { this.price += new_price; } }, computed: { //這里沒有寫函數，直接寫了兩個類 get 和 set 顧名思義
discount: { get: function() { return this.price * 0.8; }, set: function(new_price) { this.price = new_price; } } } }); </script>
</html>