zoukankan      html  css  js  c++  java
  • vue 之computed 计算属性

    <!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="js/vue.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>
        <!-- 只输出一次'ok' -->
      </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>
  • 相关阅读:
    JAVAEE框架搭建所需的配置文件大全
    JPA之hibernate例子+总结
    NtDuplicateObject小解读
    黑窗口输入确定数字弹MessageBox(VirtualProtect())
    内存理解之简单的内存修改器
    注入理解之挂起线程
    银行家算法
    ReflectiveLoader分析(远程线程注入 PE修正)
    Window10中利用Windbg与虚拟机(window7)中调试驱动建立方法
    了解RabbitMQ
  • 原文地址:https://www.cnblogs.com/linm/p/12533285.html
Copyright © 2011-2022 走看看