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";
  • 相关阅读:
    用小百合学python
    驱动对象 设备对象 设备栈 乱杂谈
    [转]很经典的http协议详解
    利用VMWare和WinDbg调试驱动程序
    GCC基础
    史上最著名的10个思想实验 (转)
    windows XP下驱动开发环境设置(DDK+VC6.0)
    守护进程
    驱动SYS开发总结
    ASP.NET学习笔记1
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_instance_prop_methods_computed.html
Copyright © 2011-2022 走看看