vue计算属性使用方法

最新推荐文章于 2024-07-24 22:25:19 发布

厉害的明大神

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量1k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43818430/article/details/110071001

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue计算属性使用方法

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{name}}</h1>
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <h1>表达式：{{name.split('').reverse().join('')}}</h1>
    <h1>过滤器：{{name|rev}}</h1>
    <h1>方法：{{rev()}}</h1>
    <h1>计算属性：{{newRev}}</h1> 
    <!-- 使用计算属性的时候不能添加(),否则会报错 -->

    <h4>{{newAge}}</h4>

  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        // rev: '哈哈哈',
        age: 20
      },
      filters:{ 
        // 过滤器由于不会被挂载到当前实例上，所以可以与data、methods等变量名重名，不影响它的使用
        rev(val){
          // 不管更改了 this.name还是 this.age 这个函数都会执行
          console.log('filter');
          return val.split('').reverse().join('')
        }
      },
      methods: {
        // 方法中的方法名不能跟data中的变量名重复，否则会报错
        rev() {
          // 不管更改了 this.name还是 this.age 这个函数都会执行
          console.log('method');
          return this.name.split('').reverse().join('')
        }
      },
      computed: {
        // 计算属性的方法中的this都是当前实例，且计算属性最终会被挂载到当前实例vm上，所以它不能与data中的属性名重复，否则会报错
        // 不能与methods中的方法名重复，否则会被覆盖
        /* rev(){
          return this.name.split('').reverse().join('')
        } */

        // 计算属性的简写
        newRev() {
          // this -> vm
          // 只要这个属性的依赖不发生改变，那么这个函数就不会执行（只要this.name的值不变，这个函数就不执行）

          // 只有它的依赖 this.name 的值更改了，这个函数才会执行
          console.log('computed')
          return this.name.split('').reverse().join('')
        },

        // 一般计算属性中直接return一个值，则该计算属性只能读取，不能更改，如果想要更改，则需要将其get和set函数写全（计算属性的全写）
        newAge: {
          get() {
            // 获取该计算属性的值会触发这个函数执行

            // 计算属性只能用于同步
            setTimeout(() => { // 异步：更改异步中的依赖，异步回调函数也不会执行
              console.log(this.name); // 更改依赖 this.name的值，不管等多久这里都不会执行
            }, 10);

            console.log('newAge'); // 连带着这里也不执行，只有更改的是依赖 this.age（同步），这里才会执行
            return this.age;
          },
          set(val){
            // 给该计算属性设置值的时候会触发这个函数
            // val就是要给计算属性 newAge 设置的新值
            this.age = val;
          }
        }
      }
    });
    vm.newAge = 100; // 可以更改；
    // vm.newRev = '123'; // 报错 Computed property "newRev" was assigned to but it has no setter.

  </script>
</body>

</html>