-
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>