计算属性

1. 页面中只需要展示数据 不需要进行数据处理
2. 计算属性和普通属性一样直接使用就可以
3. 特点：
   1. 计算属性想要的到一个值 只需要返回就可以了
   2. 可以写一定的逻辑代码
   3. 当我们在计算属性中使用的数据发生改变时 函数 会重新执行 并得到一个新的结果
4. 例子：

      var option = {
         data() {
            return {
               author: {
               name: '吴承恩',
               books: ['西游记'],
               num: 1,
               count: 1
               }
            }
         },
         computed: {
            // 在vue中几乎所有的函数 this 指向 vm
            // 基础写法
            hasBook() {
               //   1. 计算属性想要的到一个值 只需要返回就可以了
               //   2. 可以写一定的逻辑代码
               //   3. 当我们在计算属性中使用的数据发生改变时 函数 会重新执行 并得到一个新的结果
               // console.log(this)
               console.log('----------')
               return (this.author.books.length > 0 ? '是' : '否') + this.author.num
            }
         }
      }
      var vm = Vue.createApp(option).mount('#app')

12. 计算属性高级用法

1. 计算属性默认不可以被修改 如果需要修改 需要借助 set 方法
2. 代码：

      var option = {
         data() {
            return {
               user: {
               firstname: '张',
               lastname: '三'
               }
            }
         },
         computed: {
            // 通过计算属性得到用户全名
            //   username() {
            //     return this.user.firstname + '-' + this.user.lastname
            //   }
            // 计算属性高级用法
            // 计算属性默认不可以被修改 如果需要修改 需要借助set 方法
            username: {
               // get 获取数据
               get() {
               // 获取数据
               return this.user.firstname + '-' + this.user.lastname
               },
               // set设置数据
               set(value) {
               //   console.log(value)
               var firstname = value.split('-')[0]
               var lastname = value.split('-')[1]
               //   console.log(this)
               this.user.firstname = firstname
               this.user.lastname = lastname
               }
            }
         }
      }
      var vm = Vue.createApp(option).mount('#app')