【Vue】计算属性的完整写法

最新推荐文章于 2024-07-22 08:55:10 发布

只会CV只会CV只会CV

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量190

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39921135/article/details/139454486

版权

Vue 专栏收录该内容

228 篇文章 0 订阅

订阅专栏

计算属性默认的简写，只能读取访问，不能 “修改”。

如果要 “修改” → 需要写计算属性的完整写法（即写成对象）。

68204182296

<body>
  <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>

    <button @click="changeName">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备',
      },
      methods: {
        changeName() {
          this.fullName = '吕小布'
        }
      },
      computed: {
        // 简写 → 获取，没有配置设置的逻辑
        // fullName () {
        //   return this.firstName + this.lastName
        // }

        // 完整写法 → 获取 + 设置
        fullName: {
          // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
          //     会将返回值作为，求值的结果
          get() {
            return this.firstName + this.lastName
          },
          // (2) 当fullName计算属性，被修改赋值时，执行set
          //     修改的值，传递给set方法的形参
          set(value) {
            // console.log(value.slice(0, 1))          
            // console.log(value.slice(1))         
            this.firstName = value.slice(0, 1)
            this.lastName = value.slice(1)
          }
        }
      }
    })
  </script>
</body>

只会CV只会CV只会CV

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【Vue】计算属性的完整写法

/ (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）// (2) 当fullName计算属性，被修改赋值时，执行set。如果要 “修改” → 需要写计算属性的完整写法（即写成对象）。计算属性默认的简写，只能读取访问，不能 “修改”。// 修改的值，传递给set方法的形参。// 简写 → 获取，没有配置设置的逻辑。// 会将返回值作为，求值的结果。// 完整写法 → 获取 + 设置。
复制链接

扫一扫

专栏目录