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

vue 专栏收录该内容
6 篇文章 0 订阅

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
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值