template元素不支持v-show指令,即v-show="false"对template元素来说不起作用。但是此时的template元素支持v-if、v-else-if、v-else、v-for这些指令。
//vue中template的三种写法,目前常见的是第三种

//第一种(使用模板字符串)早期字符串拼接年代

new Vue({
el: “#app”,
template: ’


{{message}}


',
data: {
message: ‘字符串拼接’
}
})

//第二种(使用script元素)HTML5标准之前的写法

new Vue({
el: “#app”,
template: ‘#tem’,
data: {
message: ‘HTML5标准之前的写法,存在一定弊端(可自行google)
之后HTML5发布的template元素弥补了此方式的缺点’
}
})

//第三种(使用template元素)HTML5标准之后的写法【第二种的升级版】

{{message}}

new Vue({
el: “#app”,
template: ‘#tem’,
data: {
message: 'HTML5中的template标签 ,注意:
template是HTML5中的标签,
不是自定义标签,
也不是Vue中的组件
MDN-docs:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template ’
}
})

Logo

前往低代码交流专区

更多推荐