计算属性computed的使用

最新推荐文章于 2023-06-02 14:31:01 发布

web_blog

最新推荐文章于 2023-06-02 14:31:01 发布

阅读量731

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43248623/article/details/107015256

版权

vue 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 分析： -->
      <!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname -->
      <!-- 2. 如何监听到 文本框的数据改变呢？？？ -->

      <input type="text" v-model="firstname" />+
      <input type="text" v-model="middlename" />+
      <input type="text" v-model="lastname" />=
      <!-- 一打开浏览器就会有第一次引用 调用computed计算属性 把结果缓存起来 -->
      <input type="text" v-model="fullname" />
      <!-- 页面中重复引用直接从缓存中获取第一次引用的结果 不会重新调用conputed中计算属性function求值  -->
      <p>{{ fullname }}</p>
      <p>{{ fullname }}</p>
      <p>{{ fullname }}</p>
    </div>

    <script type="text/javascript">
      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          firstname: "",
          middlename: "",
          lastname: ""
        },
        methods: {},
        computed: {
          // 自定义一些计算属性，只限制当前vm实例控制区域使用
          // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，
          // 就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；
          // 并不会把 计算属性，当作方法去调用；

          // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
          // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发生了变化，就会 立即重新计算 这个 计算属性的值
          // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 页面中只在第一次引用时调用这里function 结果被缓存起来
          // 从第二次开始页面上所有引用全部从缓存中获取 不会再重新调用这里的function
          // 如果 计算属性方法中，所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
          fullname: function() {
            // 类似与对象的访问器get, 最终映射为属性名为健:return结果为值
            // 页面上引用了一次 第一次来获取fullname值 必然调用一下function 返回结果
            // 页面第二次引用 没修改数据时 不会重新调用计算属性求值
            console.log("ok"); // 只执行一次
            return this.firstname + "-" + this.middlename + "-" + this.lastname;
            // return "hello word";
          }
        }
      });

      //   var obj = {
      //     firstname: "xu",
      //     lastname: "xingfeng",
      //     get fullname() {
      //       return this.firstname + this.lastname;
      //     },
      //     set fullname(value) {
      //       this.firstname = value;
      //     }
      //   };
      //   console.log(obj.fullname);
    </script>
  </body>
</html>

web_blog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算属性computed的使用

效果图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript" src="./lib/vue-2.4.0.js"></script> </head> <body>
复制链接

扫一扫

专栏目录