<!-- MyUserApp.vue -->
<template>
<div class="box">
<h2>👤 用户信息</h2>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<input v-model="newName" placeholder="输入新名字" />
<button @click="updateName">更新名字</button>
<input v-model="newAge" placeholder="输入新年龄" />
<button @click="updateAge">更新年龄</button>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 用户对象，使用 reactive 让它变响应式
const user = reactive({
name: '小明',
age: 18
})
// 新名字输入框的值，使用 ref
const newName = ref('')
// 新年龄输入框的值，使用 ref
const newAge = ref('')
// 点击按钮时更新名字
function updateName() {
if (newName.value.trim() !== '') {
user.name = newName.value
newName.value = ''
}
}
// 点击按钮时更新年龄
function updateAge() {
const ageNumber = parseInt(newAge.value, 10)
if (!isNaN(ageNumber)) {
user.age = ageNumber
newAge.value = ''
}
}
</script>
<style scoped>
.box {
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
width: 300px;
}
input {
margin-top: 10px;
padding: 5px;
}
button {
margin-left: 10px;
padding: 5px 10px;
}
</style>