zoukankan      html  css  js  c++  java
  • vue中关于computed的一点理解

     

    computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。

    例子:

    复制代码
    <body id="content">
        <parent :childrens="childrens"></parent>
    </body>
    <!-- 这个测试主要想证明: 对于计算属性里如果关联对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会出发计算属性的方法-->
    <script>
        var parent = Vue.extend( {
            props: {
                childrens: ''
            },
            template: '<div >{{age}}</div>',
            data: function() {
                return {
                    name: '',
                    age: 18
                };
            },
            computed: {
                age: function() {
                    return this.childrens.age +10;
                }
            },
            created: function() {
                var _parent = this.$parent;
                this._set = {};
                this._set = _parent; 
            }
        } );
        var vm = new Vue( {
            el: 'body',
            data: {
                childrens: {
                    name: '小强',
                    age: 20,
                    sex: '男'
                }
            },
            components: {
                'parent': parent
            }
        } );
        vm.$data.childrens.age = 50;
    </script>
    复制代码
    当vm.$data.childrens.age这个值改变的时候,动态触发computed里的age属性计算,最后显示到页面的结果是:60。
  • 相关阅读:
    CentOS 7.3 CDH 5.10.0 Druid0.12.4安装记录
    cloudera manager卸载流程
    CDH5.10.0 离线安装(共3节点) 转
    CentOS 7 安装Httpd(转)
    CentOS下MySQL的彻底卸载
    CentOS7 修改主机名
    sendEvent()
    QSignalMapper Class
    ubuntu12.04开启虚拟机的unity模式
    BCM_I2C函数更改
  • 原文地址:https://www.cnblogs.com/yesu/p/8425437.html
Copyright © 2011-2022 走看看