Vue3简单使用computed实例

`<br> <template></p> <h1>姓名计算器</h1> <p>姓：<input type="text" v-model="xing"></p> <p>名：<input type="text" v-model="ming" name="" id=""></p> <div>您的姓名是：{{ username}}</div> <div>您的姓名是：{{ username2}}</div> <div> <ul> <li v-for="item in goodsarr" :key="item.id"><input type="checkbox" v-model="item.type">{{ item.name }}</li> <li ><input type="checkbox" v-model="goodstype">全选</li> </ul> </div> </template> <script setup lang="ts"> import { ref ,computed} from 'vue'; let xing = ref('') let ming = ref('') let goodsarr = ref([ {id:1,name:'商品1',type:false}, {id:2,name:'商品2',type:true}, {id:3,name:'商品3',type:false}, {id:4,name:'商品4',type:false}, ]) // 计算属性的使用方式 let username = computed(()=>{ return xing.value+ming.value }) let username2 = computed({ get(){ return xing.value+ming.value }, set(val){ <pre><code>} </code></pre> <p>})<br> // 可读可写的计算属性<br> let goodstype = computed({<br> get(){<br> return goodsarr.value.every(item=>item.type)<br> },<br> set(val){</p> <pre><code> goodsarr.value.map(item=>item.type=val) } </code></pre> <p>})</p> </script> <textarea>`