vue的计算属性和侦听属性

最新推荐文章于 2025-10-12 10:59:24 发布

原创最新推荐文章于 2025-10-12 10:59:24 发布 · 911 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue计算属性 #vue侦听属性

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文通过两个实例介绍了Vue.js中计算属性与侦听属性的应用：一是使用计算属性实现两数相加的实时更新；二是运用侦听属性完成点赞状态的实时监测。

利用计算属性computed做了个简单的两个数相加的效果，代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.min.js" ></script>
    </head>
    <body>
        <input type="text" name="text" name="num1" v-model="num1" />+
        <input type="text" name="text" name="num2" v-model="num2" />={{sum}}
        
        
        <script>
             new Vue({
                  el:"body",
                    data:{
                        num1:"",
                        num2:""
                    },
                    computed:{
                        sum:function(){
                            return Number(this.num1)+ Number(this.num2)
                        }
                    }
           
             })
            
            
        </script>
    </body>
</html>

其实现的效果图如下：

当你往输入框输入数字，等于后面的结果会同步计算。

利用侦听属性$watch做了个简单点赞状态的监听事件，代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.min.js" ></script>
    </head>
    <body>
        <button @click="btn">点赞</button>
        <P>状态{{info}}{{c}}</P>
        <script>
        var ve=new Vue({
                  el:"body",
                    data:{
                        count:0,
                        info:"未点赞",
                        c:0
                    },
                    methods:{
                        btn:function(){
                            this.count++
                        }
                    }
           
             })
            
            ve.$watch("count",function(val){
                this.info="已点赞";
                this.c=val
            })
            
            
        </script>
    </body>
</html>

其实现的效果图如下：

当未点击点赞按钮时，状态为未点赞