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

来源：互联网发布：java 获取当天日期编辑：程序博客网时间：2024/06/05 19:59

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(); -> 查看现在数据的状态

阅读全文

0 0