49 lines
890 B
Vue
49 lines
890 B
Vue
<script setup lang="ts">
|
||
import {ref,computed} from "vue";
|
||
|
||
let firstName = ref('zhang')
|
||
let listName =ref('san')
|
||
|
||
// 计算属性有缓存
|
||
let myName = computed({
|
||
//return firstName.value + listName.value
|
||
get(){
|
||
return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
|
||
},
|
||
set(setName){
|
||
const [val1 = '',val2 = ''] = setName.split('-')
|
||
firstName.value = val1
|
||
listName.value = val2
|
||
}
|
||
})
|
||
|
||
function changeName(){
|
||
myName.value = 'li-si'
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<main class="person">
|
||
姓：<input type="text" v-model:="firstName">
|
||
名：<input type="text" v-model:="listName">
|
||
</main>
|
||
<h1>姓名：{{myName}}</h1>
|
||
|
||
<button @click="changeName">改名</button>
|
||
</template>
|
||
|
||
<style scoped>
|
||
button {
|
||
margin: 0 1rem;
|
||
}
|
||
.person {
|
||
font-size: 2rem;
|
||
line-height: 2rem;
|
||
input{
|
||
height: 2rem;
|
||
|
||
}
|
||
}
|
||
</style>
|