zoukankan      html  css  js  c++  java
  • Vue.js 计算属性

    <body>
        <div id="computed">
            <p>Message: "{{ message }}"</p>
            <p>Computed reversed message: "{{ reversedMessage }}"</p>
            <p>Computed reversed message: "{{ reversedMessage2() }}"</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#computed',
                data: {
                    message: 'Hello Vue'
                },
                computed: {
                   reversedMessage: function () {
                       return this.message.split('').reverse().join('')
                   }
                },
                methods: {
                    reversedMessage2: function () {
                        return this.message.split('').reverse().join('')
                    }
                }
            });
    
        </script>
    </body>

    通过调用表达式中的method来达到同样的效果:不经过计算属性,我们可以在 method 中定义一个相同的函数来替代它。

    计算属性:它是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    method:每当重新渲染的时候,method 调用总会执行函数。

  • 相关阅读:
    Linux之开源软件移植
    数学问题的解题方法(模板)
    图论相关算法理解和总结
    关于ACM,关于CSU
    hdu 4607(树的直径)
    树的直径
    SGU-181 X-Sequence
    1629 B君的圆锥
    1134 最长递增子序列(暴力写的)
    1483 化学变换(暴力)
  • 原文地址:https://www.cnblogs.com/mina-huojian66/p/6429660.html
Copyright © 2011-2022 走看看