一、功能
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>
三、运行结果
运行效果如下:
输入姓名和城市后,效果如下: