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 = 10;
    </script>
    

     当vm.$data.childrens.age这个值改变的时候,动态触发computed里的age属性计算,最后显示到页面的结果是:20。

  • 相关阅读:
    C++---const
    qt--textEdit多行文本编辑框
    qt--QByteArray字节数组
    qt5--拖放
    qt5--自定义事件与事件的发送
    qt5--键盘事件
    qt5--鼠标事件
    qt5-事件过滤器
    qt5-event事件的传递
    qt-事件的接受和忽略
  • 原文地址:https://www.cnblogs.com/fangshidaima/p/6365632.html
Copyright © 2011-2022 走看看