在模板中当一个属性的值依赖另一个属性时,采用计算属性。
<html>
<script src='js/vue.js'></script>
</head>
<body>
<div id="example">
<input type='text' v-model='basePrice'/>
<button v-on:click="show">显示否</button><br>
<span v-if='flag'> {{ words }}</span>
</div>
</body>
<script type='text/javascript'>
new Vue({
el: '#example',
data: {
flag: true,
basePrice: 21
},
methods: {
show: function() {
this.flag = !this.flag;
}
},
computed: {
words: function() {
return this.basePrice + 1;
}
}
});
</script>
</html>