计算属性-computed 、监听-watch、设置计算属性

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104043064

Vue.js - 计算属性和监视

一、computed计算属性
二、监听属性watch
三、设置计算属性

一、computed计算属性

计算属性相对于方法的区别就在于计算属性存在缓存
computed计算属性，可以使定义变量函数，返回新的函数值

  <script>
    window.onload = function () {
      const vm = new Vue({
        el: '#app',
        data:{
          firstName:'A',
          lastName:'B',
        },
        computed:{
          fullName1(){
            return this.firstName + ' ' + this.lastName;
          }
        }
      })
    }
  </script>
<body>
  <div id="app">
     姓： <input type="text" placeholder="First Name" v-model="firstName"><br>//双向数据绑定，input框中的内容可以随着用户的输入而改变
     名： <input type="text" placeholder="Last Name" v-model="lastName"><br>//双向数据绑定，input框中的内容可以随着用户的输入而改变
     姓名1(单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>//利用双向数据绑定，使input里的值可以随着fullName里的值的改变而改变
  </div>
</body>

结果显示：
在这里插入图片描述

二、监听属性watch

watch只能监听data数据域中的变量，当此被监听的变量发生变化时，执行相应的函数。

 <script>
    window.onload = function () {
      const vm = new Vue({
        el: '#app',
        data:{
          firstName:'A',
          lastName:'B',
          fullName1: ' '
        },
        watch:{
          firstName:function (value) {
            this.fullName1 = value + ' ' + this.lastName;
          }
        }
      })
      vm.fullName1 = 'A';
    }
  </script>
<body>
  <div id="app">
     姓： <input type="text" placeholder="First Name" v-model="firstName"><br>
     名： <input type="text" placeholder="Last Name" v-model="lastName"><br>
     姓名2(单向）：<input type="text" placeholder="Full Name2" v-model = "fullName1"><br>
  </div>
</body>

三、设置计算属性

computed中定义对象fullName3，在对象中再定义两个函数，其中set函数类似watch监听功能，当fullName3变化时，执行相应的功能

  <script>
    window.onload = function () {
      const vm = new Vue({
        el: '#app',
        data:{
          firstName:'A',
          lastName:'B',
        },
        computed:{
          fullName3:{
            get(){
              return this.firstName + ' ' + this.lastName;
            },
            set(value){
              const names = value.split(' ')
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        }
      })
    }
  </script>
<body>
  <div id="app">
     姓： <input type="text" placeholder="First Name" v-model="firstName"><br>
     名： <input type="text" placeholder="Last Name" v-model="lastName"><br>
     姓名3(双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
  </div>
</body>