Loading... ## v-model双向绑定 ```vue <template> <div class="test"> 姓：<input type="text" v-model="firstname"><br> 名：<input type="text" v-model="lastname"><br> 全名：<span>{{ firstname }}{{ lastname }}</span> </div> </template> <script lang="ts" setup name="test"> import {ref} from 'vue' let firstname=ref('张') let lastname=ref('三') </script> <style> </style> ``` 这一段代码中有两个输入框，默认为张和三，使用v-model双向绑定以后，在输入框中更改数据就可以直接在全名中显示出来  ## 计算属性 如果我们需要对数据进行处理时，可能会在模板里写入很多表达式，这不利于系统的运行。所以我们可以使用Computed函数 ```vue <template> <div class="test"> 姓：<input type="text" v-model="firstname"><br> 名：<input type="text" v-model="lastname"><br> 全名：<span>{{ fullname }}</span> </div> </template> <script lang="ts" setup name="test"> import {ref,computed} from 'vue' let firstname=ref('张') let lastname=ref('三') let fullname=computed(()=>{ return firstname.value.slice(0,1).toUpperCase()+firstname.value.slice(1)+'--'+lastname.value }) </script> <style> </style> ``` 在computed中我们可以写一个箭头函数来作为返回值。同时，computed函数有缓存，当我们多次调用时只会运行一次。但这时fullname是只读的，不可改。  如果我们要将其变为可更改的，就需要这样书写： ```vue <template> <div class="test"> 姓：<input type="text" v-model="firstname"><br> 名：<input type="text" v-model="lastname"><br> 全名：<span>{{ fullname }}</span> <button @click="changeName">修改为李四</button> </div> </template> <script lang="ts" setup name="test"> import {ref,computed} from 'vue' let firstname=ref('张') let lastname=ref('三') let fullname=computed({ get(){ return firstname.value.slice(0,1).toUpperCase()+firstname.value.slice(1)+'-'+lastname.value }, set(val){ let [str1,str2] = val.split('-') firstname.value=str1 lastname.value=str2 } }) function changeName(){ fullname.value='li-si' } </script> <style> </style> ``` get是只读取时获得的数据，set时赋值时执行的语句，会传入新的值 最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！