3.computed

小雨和小浩

已于 2024-07-23 18:10:41 修改

阅读量111

点赞数 3

分类专栏： vue3 文章标签： vue.js

于 2024-07-23 18:05:47 首次发布

本文链接：https://blog.csdn.net/angle_wty/article/details/140642734

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

修改计算属性

  <div class="box">
    <div>
      姓：<input type="text" v-model="firstName">
    </div>
    <div>
      名：<input type="text" v-model="lastName">
    </div>
    <div>全名： {{ fullName }}</div>
    <button @click="changeName">修改全名</button>
  </div>

import {ref, computed} from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')
// let fullName = computed(() => {
//    return firstName.value + '-' +  lastName.value
// })
//  通过set，修改计算属性
let fullName = computed({
  get() {
    return firstName.value + '-' +  lastName.value
  },
  set(newVal) {
    [firstName.value,lastName.value] = newVal.split('-');
  }
})
const changeName = () => {
  fullName.value = 'li-si';
}