zoukankan      html  css  js  c++  java
  • Vue--computed计算属性监听数据变化----与watch,methods对比

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="middlename"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">
    
        <p>{{ fullname }}</p>
        <p>{{ fullname }}</p>
        <p>{{ fullname }}</p>
    
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstname: '',
            lastname: '',
            middlename: ''
          },
          methods: {},
          computed: { // 在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用;
    
            // 注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
            // 注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
            // 注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所以来的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;
            'fullname': function () {
              console.log('ok')
              return this.firstname + '-' + this.middlename + '-' + this.lastname
            }
          }
        });
      </script>
    </body>
    
    </html>
  • 相关阅读:
    什么是工厂模式
    冒泡算法
    CSS中的绝对定位与相对定位
    JS function立即调用的几种写法
    paip.java 线程无限wait的解决
    paip.java 多线程参数以及返回值Future FutureTask 的使用.
    PAIP.并发编程 多核编程 线程池 ExecutorService的判断线程结束
    paip.slap工具与于64位win7与JDBC的性能对比
    JProfiler8 注册码序列号
    paip.提升性能---mysql 优化cpu多核以及lan性能的关系.
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11617822.html
Copyright © 2011-2022 走看看