2021-07-03 vue的methods属性,watch属性和computed属性

最新推荐文章于 2025-02-06 09:00:00 发布

前端OnTheRun

最新推荐文章于 2025-02-06 09:00:00 发布

阅读量290

点赞数

分类专栏： vue 文章标签： vue vue属性 watch methods computed

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/118365644

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了Vue.js中的methods属性用于定义方法，watch属性用于监听数据变化并响应，以及computed属性用于处理复杂逻辑和计算。通过示例展示了它们的用途、语法及效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.方法属性methods的使用

用途

给 Vue 定义方法

语法

var vm = new Vue({
    methods:{
        // 在此处定义方法，方法之间使用逗号分隔
        方法名:function(){}
});

示例

html

<div>
    {{msg}}
    <span><button @click="add(3)">点击</button></span>
</div>

new Vue({
    el: "div",
    data: {
        msg: 2
    },
    methods: {
        add: function(num) {
            if (num != "") {
                this.msg += num;
            } else {
                this.msg++;
            }
        }
    }
})

效果

在这里插入图片描述

2.监听属性watch的使用

用途

响应数据的变化: 当绑定的值发生变化时，watch监听到并且执行

语法

watch:{	
    数据名1:"methods函数名1",
    数据名2:函数体(new,old){},   //1.值变化时候，watch才执行
    数据名3:{ //2.值最初时候watch就执行就用到了handler和immediate属性
        handle:fn(new,old){},//handler方法
        deep:true,//deep属性:深度监听，常用于对象下面属性的改变
        immediate:true//immediate属性:让值最初时候watch就执行(有点像do..while)
    }
}

示例

html

<div id="app3">
    <div class="ipt">
        <p>用户名: <input type="text" v-model="Object"></p>
        <p>手机号: <input type="text" v-model="Object2"></p>
        <p>所在城市: <input type="text" v-model="Object3.a"></p>
    </div>
    <div class="box" style="width: 300px;height: 200px;border:solid #ccc;padding: 50px auto;">
        <p>您的用户名是: {{Object}}</p>
        <p>您的手机号是: {{Object2}}</p>
        <p>您所在的城市是: {{Object3.a}}</p>
    </div>
</div>

new Vue({
    el: '#app3',
    data: {
        Object: "数字/字母/下划线",
        Object2: "输入11位手机号",
        Object3: {
            a: "您所在的城市"
        }
    },
    watch: {
        Object: function() {
            console.log("Object changed...")
        },
        //在wacth里声明了Objdect2这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
        Object2: {
            handler(newName, oldName) {
                console.log('Object2 changed...');
            },
            immediate: true,
        },
      /*deep可以监听obj里的属性a的值*/
        // Object3 {
        //     handler(newName, oldName) {
        //         console.log('Object3.a changed');
        //     },
        //     immediate: true,
        //     deep: true
        // },
        /*上式修改obj里面任何一个属性都会触发这个监听器里的 handler,因此可以设置Object3.a以防止*/
        "Object3.a": {
            handler(newName, oldName) {
                console.log('Object3.a changed');
            },
            //immediate: true,
            // deep: true
        },
    }
});

效果

1.设置immidiate::true后,input框并未改变时先执行: Object2 changed…
2.改变三个input框内容后输出console.log语句:Object changed Object2 changed.Object3 changed…
在这里插入图片描述

3.计算属性computed的使用

用途

处理复杂逻辑

语法

//定义
computed:{
    计算属性: function(){return 返回值}		
}
//使用
使用:	{{计算属性}} |  v-指令="计算属性"

示例

html

<div id="app">{{name}}</div>

var vm = new Vue({
el: "#app",
data: {
    firstName: "Steve",
    lastName: "Jobs"
},
computed: {
    name: function() {
        return this.firstName + " " + this.lastName;
    }
}

输出:Steve Jobs

*计算属性默认只有getter,需要时也可提供setter

computed: {
    name: {
        get: function() {
            return this.firstName + " " + this.lastName;
        },
        set: function(val) {
            var fullName = val.split('');
            this.firstName = fullName[0];
            this.lastName = fullName[fullName.length - 1];
        }
    }
}