Vue3的fragment
vue2时,组件的模板结构中出现多个标签时,需要使用根标签。vue3时,组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会自动将多个标签用Fragment组件包裹。举个例子。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<t
·
vue2时,组件的模板结构中出现多个标签时,需要使用根标签。
vue3时,组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会自动将多个标签用fragment包裹。
举个例子。
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<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>
- 启动应用,测试效果
更多推荐
已为社区贡献19条内容
所有评论(0)