You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.6 KiB
74 lines
1.6 KiB
2 years ago
|
<template>
|
||
|
|
<h1>个人信息：</h1>
|
||
|
|
<h2 v-show="person.name">姓名：{{ person.name }}</h2>
|
||
|
|
<h2>年龄：{{ person.age }}</h2>
|
||
|
|
<h2 v-show="person.sex">性别：{{ person.sex }}</h2>
|
||
|
|
<h2>工作种类：{{ person.job.type }}</h2>
|
||
|
|
<h2>薪水：{{ person.job.salary }}</h2>
|
||
|
|
<h2>爱好：{{ person.hobby }}</h2>
|
||
|
|
<h2>c的值：{{ person.job.a.b.c }}</h2>
|
||
|
|
<button @click="changeInfo">修改信息</button>
|
||
|
|
<button @click="addSex">添加性别</button>
|
||
|
|
<button @click="deleteName">删除姓名</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {ref, reactive} from "vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'App',
|
||
|
|
setup() {
|
||
|
|
// 数据
|
||
|
|
// let name = ref('张三')
|
||
|
|
// let age = ref(19)
|
||
|
|
// let job = reactive({
|
||
|
|
// type: '前端工程师',
|
||
|
|
// salary: '30K',
|
||
|
|
// a: {
|
||
|
|
// b:{
|
||
|
|
// c: 666
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// let hobby = reactive(['抽烟','喝酒','烫头'])
|
||
|
|
let person = reactive({
|
||
|
|
name: '张三',
|
||
|
|
age: 18,
|
||
|
|
job: {
|
||
|
|
type: '前端工程师',
|
||
|
|
salary: '30K',
|
||
|
|
a: {
|
||
|
|
b: {
|
||
|
|
c: 666
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hobby: ['抽烟', '喝酒', '烫头']
|
||
|
|
})
|
||
|
|
|
||
|
|
function changeInfo() {
|
||
|
|
person.name = '李四'
|
||
|
|
person.age = 88
|
||
|
|
person.job.type = '后端工程师'
|
||
|
|
person.job.salary = '31K'
|
||
|
|
person.hobby[0] = '测试'
|
||
|
|
}
|
||
|
|
|
||
|
|
function addSex() {
|
||
|
|
person.sex = '男'
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteName() {
|
||
|
|
delete person.name
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
person,
|
||
|
|
changeInfo,
|
||
|
|
addSex,
|
||
|
|
deleteName
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|