一、功能
1、界面上兩個輸入框，一個用來輸入姓名，一個用來輸入城市
2、第二行是一個段落，用來做自我介紹，顯示剛纔輸入的姓名和城市
3、第三行是一個段落，用來統計自我介紹改變的次數，自我介紹改變一次，統計次數就加一
二、分析
1、輸入框：需要雙向綁定 v-model
2、自我介紹：由姓名和城市得來，是計算屬性 computed
3、改變次數：需要對屬性監聽 watch
二、實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="introduce">
姓名：<input v-model="name">
城市：<input v-model="city">
<p>介紹：{{content}}</p>
<p>改變次數統計：{{count}}</p>
</div>
<script>
new Vue({
el:"#introduce",
data:{
name:"",
city:"",
count:0
},
computed:{
content:function () {
return "我的名字叫"+this.name+"，我來自"+this.city
}
},
watch:{
content:function () {
this.count++
}
}
})
</script>
</body>
</html>
三、運行結果
運行效果如下：
輸入姓名和城市後，效果如下：
