zoukankan      html  css  js  c++  java
  • vue实例属性之methods和computed

    我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数。而methods每当触发重新渲染时,就会再次执行函数。

    一、methods用法

    <div id="J_app">
      <p>{{ info }}</p>
      <button v-on:click="reverseText">逆转消息</button>
      <button @click="reverseText">v-on缩写,逆转消息</button>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: 'Hello Vue.js!'
      },
      methods: {
        reverseText: function () {
          this.info = this.info.split('').reverse().join('')
        }
      }
    })

    二、computed用法

    1、默认用法

    <div id="J_app">
      <p>{{ info }}</p>
      <p>{{ reverseText }}</p>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: 'Hello Vue.js!'
      },
      computed: {
        reverseText: function () {
          return this.info.split('').reverse().join('')
        }
      }
    })

    2、自定义set
    computed默认只有get,可以自定义一个set。

    <div id="J_app">
      <p>{{ info }}</p>
      <p>{{ reverseText }}</p>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: 'Hello Vue.js!'
      },
      computed: {
        reverseText: {
            get:function () {
              return this.info.split('').reverse().join('')
            },
            set:function () {
              this.info = this.info.split('').reverse().join('') +'设置后'
            }
        }
      }
    })
    vapp.reverseText ="learn vue from today";
  • 相关阅读:
    .NET LINQ 数据分区
    .NET LINQ 投影运算
    .NET LINQ 限定符操作
    .NET LINQ 筛选数据
    freeswitch媒体处理方式
    freeseitch设置通道增益
    鼎信设备设置通道增益,提高音量
    freeswitch 录音
    freeswitch录音设置(不设置缓存)
    freswitch 设置sip中的callid作为用到的uuid
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_instance_prop_methods_computed.html
Copyright © 2011-2022 走看看