vue计算属性和监听器实例

「爱情、让人受尽委屈。」 2022-02-04 05:01 305阅读 0赞

### 文章目录 ###

*   *   *  一、功能
         *  二、分析
         *  二、实现
         *  三、运行结果

### 一、功能 ###

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>

### 三、运行结果 ###

**运行效果如下：**  
![在这里插入图片描述][20190506232315719.png]  
**输入姓名和城市后，效果如下：**  
![在这里插入图片描述][20190506232428148.png]

[20190506232315719.png]: /images/20220204/4af6b160fe8341dba3f77ae1fa2ce484.png
[20190506232428148.png]: /images/20220204/22915d0be18f420eae9b68f35a9a28d2.png