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.
41 lines
753 B
41 lines
753 B
<template>
|
|
<div class="person">
|
|
<h2>姓名：{{ person.name }}</h2>
|
|
<h2>年龄：{{ person.age }}</h2>
|
|
<button @click="changeName">修改名字</button>
|
|
<button @click="changeAge">修改年龄</button>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Person2">
|
|
import {reactive, toRefs,toRef} from 'vue'
|
|
|
|
//数据
|
|
let person = reactive({
|
|
name:'张三',
|
|
age:18
|
|
})
|
|
|
|
let {name,age} = toRefs(person)
|
|
let nl = toRef(person , 'age')
|
|
console.log(nl.value)
|
|
|
|
function changeName(){
|
|
name.value += '~'
|
|
}
|
|
|
|
function changeAge(){
|
|
age.value += 1
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.person{
|
|
background-color: aquamarine;
|
|
box-shadow: 0 0 10px;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
</style>
|