zoukankan      html  css  js  c++  java
  • vue(六)--计算属性(computed)

    计算属性关键词: computed

    demo1:

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
    
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Ambbq!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>

    computed vs methods

      我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

    demo2:

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
    </div>
    
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Ambbq!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedMessage2: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>

  • 相关阅读:
    [专题六] 位运算
    [专题五] 二叉树
    [专题四] 并查集
    [专题三] 图论
    [专题二] 排序
    [专题一] 栈和队列
    我的最新书单
    虚拟机极简配置manjaro gnome
    运算符重载
    Manjaro kde 18.0安装与基本配置
  • 原文地址:https://www.cnblogs.com/crazy-lc/p/12248685.html
Copyright © 2011-2022 走看看