vue计算属性使用方法

Vue 专栏收录该内容
10 篇文章 0 订阅

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>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值