學習Vue.js第四天
數據雙向綁定
- 使用v-model
<label>姓名：</label>
<input type="text" v-model="name"/>
<label>年齡：</label>
<input type="text" v-model="age"/></br>
<span>你的名字叫：【{{name}}】,年齡是：【{{age}}】歲。</span>
計算屬性Computed
- 沒有用計算屬性Computed之前如下圖不管是給A加值還是給B加值它都會調用兩個方法給頁面加大了渲染任務.
- 用了Computed屬性之後
- 因爲是屬性所以記得把numAB方法後面的括號()去掉
<p>A + Age = 【{{numA}}】</p> <p>B + Age = 【{{numB}}】</p>
![在這裏插入圖片描述]()
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h3>數據雙向綁定v-model</h3>
<label>姓名：</label>
<input type="text" v-model="name" />
<label>年齡：</label>
<input type="text" v-model="age" /><br/>
<span>你的名字叫：【{{name}}】,年齡是：【{{age}}】歲。</span>
<h3>計算屬性Computed</h3>
<label>A的值：【{{A}}】</label><button v-on:click="A++">點擊加1</button>
<label>B的值：【{{B}}】</label><button v-on:click="B++">點擊加1</button><br />
<p>A + Age = 【{{numA}}】</p>
<p>B + Age = 【{{numB}}】</p>
</div>
</body>
<script>
new Vue({
el: '#vue-app',
data: {
name: "old monster",
age: "22",
A: 1,
B: 1
},
methods: {
// numA:function(){
// console.log("調用numA方法");
// return this.A+parseInt(this.age);
// },
// numB:function(){
// console.log("調用numB方法");
// return this.B+parseInt(this.age);
// }
},
computed: {
numA: function() {
console.log("調用numA方法");
return this.A + parseInt(this.age);
},
numB: function() {
console.log("調用numB方法");
return this.B + parseInt(this.age);
}
}
});
</script>
</html>