vue2时,组件的模板结构中出现多个标签时,需要使用根标签。vue3时,组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会自动将多个标签用fragment包裹。
举个例子。
<template> <h2>当前和值为{{sum}}</h2> <h2>这台{{brand}}的售价是{{price}}</h2> </template> <script> import { ref,reactive,toRefs} from 'vue'; export default { name:"App", setup(){ let sum = ref(0); let car = reactive({ brand:"BYD", price:"30W" }) return { sum, ...toRefs(car) } } } </script>
- 启动应用,测试效果