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。
  • 相关阅读:
    grafana邮箱配置
    grafana集群配置
    CentOS7 配置OOM监控报警
    Mycat使用配置实践
    CentOS7安装JAVA环境
    CentOS7安装MYCAT中间件
    CentOS7安装MySQL5.6
    Mockingbird
    堆的建立与功能实现
    Matlab解决线性规划问题
  • 原文地址:https://www.cnblogs.com/freefish12/p/6046828.html
Copyright © 2011-2022 走看看