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";
  • 相关阅读:
    C#中enum的总结(转载)
    jQuery之获取select选中的值
    event.preventDefault方法的使用
    C++概述
    C++ 名字空间
    C++初步学习
    C++回调机制实现 signal-slot
    转: 关于UI开发(总结一些技术和一些论坛牛人讨论)
    Duilib 入门教程: 怎么创建一个自定义的窗口
    SQL Server 数据库设计规范
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_instance_prop_methods_computed.html
Copyright © 2011-2022 走看看