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.
46 lines
1.1 KiB
46 lines
1.1 KiB
<template>
|
|
<div class="person">
|
|
<!-- 姓：<input type="text" v-bind:value="firstName"></input><br> 单向绑定-->
|
|
姓：<input type="text" v-model:="firstName"></input><br> <!--双向绑定-->
|
|
名：<input type="text" :value="lastName"></input><br>
|
|
全名：<span>{{fullName}}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Person2">
|
|
import {ref,computed, toRefs,toRef} 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) {
|
|
const parts = val.split('-');
|
|
if (parts[0]) firstName.value = parts[0];
|
|
if (parts[1]) lastName.value = parts[1];
|
|
}
|
|
})
|
|
|
|
function changeFullName(){
|
|
fullName.value = 'li-si'
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.person{
|
|
background-color: aquamarine;
|
|
box-shadow: 0 0 10px;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
</style>
|