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.
39 lines
945 B
39 lines
945 B
<template>
|
|
<div class="person">
|
|
姓：<input type="text" v-model="firstName"> <br>
|
|
名：<input type="text" v-model="lastName"> <br>
|
|
全名：<span>{{fullName}}</span> <br>
|
|
<button @click="changeFullName">全名改为：li-si</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="App">
|
|
import {ref,computed} from 'vue'
|
|
|
|
let firstName = ref('zhang')
|
|
let lastName = ref('san')
|
|
|
|
// 计算属性——只读取，不修改
|
|
/* let fullName = computed(()=>{
|
|
return firstName.value + '-' + lastName.value
|
|
}) */
|
|
|
|
|
|
// 计算属性——既读取又修改
|
|
let fullName = computed({
|
|
// 读取
|
|
get(){
|
|
return firstName.value + '-' + lastName.value
|
|
},
|
|
// 修改
|
|
set(val){
|
|
console.log('有人修改了fullName',val)
|
|
firstName.value = val.split('-')[0]
|
|
lastName.value = val.split('-')[1]
|
|
}
|
|
})
|
|
|
|
function changeFullName(){
|
|
fullName.value = 'li-si'
|
|
}
|
|
</script>
|