vue 计算属性get set

html 复制代码
<template>
  <div id="app">
    <h1>用户信息</h1>
    <p>全名:{{ fullName }}</p>
    <input v-model="fullName" placeholder="请输入全名" />
    <p>姓:{{ firstName }}</p>
    <p>名字:{{ lastName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John", // 名字
      lastName: "Doe", // 姓氏
    };
  },
  computed: {
    // 计算属性 fullName,有 get 和 set
    fullName: {
      // get:用来获取 fullName,返回的是 firstName 和 lastName 拼接后的值
      get() {
        return this.firstName + " " + this.lastName;
      },
      // set:用来设置 fullName,当全名被修改时,分割新的值并更新 firstName 和 lastName
      set(newFullName) {
        const names = newFullName.split(" ");
        this.firstName = names[0]; // 更新 firstName
        this.lastName = names[1] || ""; // 更新 lastName(如果没有姓氏部分,设置为空字符串)
      },
    },
  },
};
</script>

<style>
h1 {
  font-size: 20px;
}
input {
  margin-top: 10px;
}
</style>

简单来说 返回值写get里面,set里面写数据操作

相关推荐
刘志辉12 分钟前
Pure Adminrelease(水滴框架配置)
vue.js
工业互联网专业18 分钟前
Python毕业设计选题:基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
NiNg_1_23418 分钟前
前端CSS3 渐变详解
前端·css·html
不法1 小时前
uniapp 跨域前端代理
前端·uni-app
lin-lins1 小时前
Vue 模板编译原理
前端·javascript·vue.js
堕落年代1 小时前
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
前端·javascript·uni-app
不惑_2 小时前
Redis:发布(pub)与订阅(sub)实战
前端·redis·bootstrap
binqian2 小时前
【Linux】内核模版加载modprobe | lsmod
linux·服务器·前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS课程答疑系统(JAVA毕业设计)
java·jvm·vue.js·spring boot·spring cloud·kafka·开源
abments2 小时前
JavaScript逆向爬虫教程-------基础篇之JavaScript密码学以及CryptoJS各种常用算法的实现
javascript·爬虫·密码学