vue计算属性的使用和vue实例的方法

最新推荐文章于 2025-08-09 09:27:20 发布

原创最新推荐文章于 2025-08-09 09:27:20 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue计算属性和vue实例的方法

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中计算属性(computed)的基本概念及其使用方法。计算属性允许开发者通过定义get和set方法来创建依赖于其它数据的属性，实现数据的动态更新。文章还展示了如何在Vue实例中使用这些属性。

vue 计算属性

当我们想要根据一端业务代码的执行结果来返回属性的值，就可以使用计算属性computed了,

计算属性是一个有结果的函数,有get方法和set方法，get方法，必须有返回值必须有返回值

<script src="lib/vue.js"></script>

<body>
<div id="box">
    a = >{{a}}
    b = > {{b}}
</div>
</body>
<script>
    var vm = new Vue({
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:function () {
                //业务代码
                return this.a+1;
            }
        }
    });
    /**这样直接改属性的值不行的，需要调用计算属性的set方法**/
    document.onclick = function(){
       vm.b = 3;
    };
</script>

计算属性的set/get方法:

<script src="lib/vue.js"></script>

<body>
<div id="box">
    a = >{{a}}
    b = > {{b}}
</div>
</body>
<script>
    var vm = new Vue({
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:{
                get:function () {
                    return this.a+1;
                },
                set:function(val){
                    this.a = val;
                }
            }
        }
    });
    /**这样直接改属性的值不行的，需要调用计算属性的set方法**/
    document.onclick = function(){
       vm.b = 3;
       //默认调用计算属性的set方法
    };
</script>

vue实例的简单方法

vm 是创建的vue实例对象的名字
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 将vue对象挂载在节点对象上

举个例子:

 var vm2 = new Vue({
        data:{},
        methods:{}
    }).$mount('#box');

等同于:

var vm2 = new Vue({
        el:'#box',
        data:{},
        methods:{}
    });

vm.$options -> 获取自定义属性,自定义方法

vue实例可以自定义属性和方法，如果需要调用就需要$options调用,举例如下:

  var vm2 = new Vue({
        aa:'1',//自定义属性
        show:function () {
            alert(1);
        },
        el:'#box',
        data:{},
        methods:{}
    });
    vm2.$options.show();
    console.log(vm2.$options.aa);

vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态