二、vue基础--计算属性和监听器

1.一些操作需要计算后才能得到的用计算属性，需要放在computed属性中代码如下：

<div id='app'>
　　<div>
　　　　<label>宽：</label>
　　　　<input type="text" v-model:value="width">
　　</div>
　　<div>
　　　　<label>高：</label>
　　　　<input type="text" v-model:value="heigth">
　　</div>
　　<div>面积：{{area}}</div>
</div>
　　<script>
　　　　new Vue({
　　　　　　el:'#app',
　　　　　　data:{
　　　　　　　　width:0,
　　　　　　　　heigth:0
　　　　　　},
　　　　　　computed:{
　　　　　　　　area(){
　　　　　　　　return this.heigth * this.width
　　　　　　}
　　　　}
　　})
</script>

2.计算属性的set：有set必须要写get，一下是省市区填写解析出来，或者是分别填写省市区拼接到汇总省市区代码如下：

<div id='app'>
　　<div>
　　　　<label>省：</label>
　　　　<input type="text" v-model:value="province">
　　</div>
　　<div>
　　　　<label>市：</label>
　　　　<input type="text" v-model:value="city">
　　</div>
　　<div>
　　　　<label>区：</label>
　　　　<input type="text" v-model:value="district">
　　</div>
　　<div>
　　　　<label>地址：</label>
　　　　<input type="text" v-model="address">
　　</div>
</div>
<script>
　　new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　province:"",
　　　　　　city:"",
　　　　　　district:""
　　　　},
　　　　computed:{
　　　　address:{
　　　　　　get(){
　　　　　　let result=""
　　　　　　if(this.province){
　　　　　　　　result += this.province+"省"
　　　　}
　　　　　　if(this.city){
　　　　　　　　result += this.city+"市"
　　　　}
　　　　　　if(this.district){
　　　　　　　　result += this.district+"区"
　　　　}
　　　　　　return result
　　　　},
　　　　set(value){
　　　　　　let result = value.split(/省|市|区/)
　　　　　　if(result && result.length>0){
　　　　　　　　this.province = result[0]
　　　　}
　　　　　　if(result && result.length>1){
　　　　　　　　this.city = result[1]
　　　　}
　　　　　　if(result && result.length>2){
　　　　　　　　this.district = result[2]
　　　　}
　　}
　　}
　　}
　　})
</script>

3.监听属性：监听属性需要放到watch中，代码如下：

<div id='app'>
　　<div>
　　　　<input type="text" v-model:value="keyword">
　　</div>
　　<div>
　　　　<span>推荐的关键字是：</span>
　　　　{{result}}
　　</div>
</div>
<script>
　　new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　keyword:"",
　　　　　　result:""
　　　　},
　　　　watch:{
　　　　　　keyword(newvalue,oldvalue){
　　　　　　　　this.result="正在加载中。。。"
　　　　　　　　setTimeout(() => {
　　　　　　　　　　this.result="推荐的结果是："+newvalue
　　　　　　　　　　},1000)
　　　　　　}
　　　　}
　　})
</script>