码迷,mamicode.com
首页 > Web开发 > 详细

03.《Vue.js》charp-03 计算属性

时间:2020-06-25 23:09:01      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:实例   包含   语法   读取   compute   containe   min   new   就会   

计算属性

计算属性:所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算后的结果。

  • 有缓存的功能

  • 有get和set
    每一个计算属性都包含一个getter和一个setter,我们上面的两个示例都是计算属性的默认用法,只是利用了getter来读取。在你需要时,也可以提供一个setter函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter函数,执行一些自定义的操作,

    computed: {
          fullName: {
              // getter,用于读取
              get: function () {
                  return this.firstName + ‘ ‘ + this.lastName;
              },
              // setter,写入时触发
              set: function (newValue) {
                  var names = newValue.split(‘ ‘);
                  this.firstName = names[0];
                  this.lastName = names[names.length - 1];
              }
          }
      }
    

    示例:

    代码清单 charp-03/3.html

  <!DOCTYPE html>
  <html>
  
  <head>
      <meta charset="utf-8">
      <title>Vue 指令与事件</title>
  </head>
  
  <body>
      <div id="app">
          <a target="_blank" v-bind:href="url">百度一下</a>
          <a target="_blank" :href="url">百度一下(语法糖)</a>
          <h1 v-if="show">你好</h1>
          <button v-on:click="showOrHideClick">{{showText}}</button>
          <button @click="showOrHideClick">{{showText}}((语法糖))</button>
      </div>
      <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
      <script>
          var app = new Vue({
              el: ‘#app‘,
              data: {
                  show: true,
                  url: ‘http://www.baidu.com‘
              },
              methods: {
                  showOrHideClick: function () {
                      this.show = !this.show;
                  }
              },
              computed: { //计算属性(有缓存的功能)
                  showText: function () {
                      return this.show ? "隐藏" : "显示";
                  }
              },
          })
      </script>
  </body>
  
  </html>
          <button>{{showText}}</button>
          ...
          data: {
                show: true,
            },
          computed: { //计算属性(有缓存的功能)
                showText: function () {
                    return this.show ? "隐藏" : "显示";
                }
            },

03.《Vue.js》charp-03 计算属性

标签:实例   包含   语法   读取   compute   containe   min   new   就会   

原文地址:https://www.cnblogs.com/easy5weikai/p/13193110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!