Vue的包裹元素标签template

在此，可以把一个元素当做不可见的包裹元素。
常用场景如下：

1，比如说当v-for和v-if要在同一个元素上时，而vue又不允许这样使用，这时而又不想新增一个标签，这里，就可以在v-for的外层使用template标签，在template上使用v-if

<template v-if="true"><div v-for="item in list" :key="item.id"></div>
</template>

2，比如说可以用在那些个HTML指定的上下级标签上，例如，你想在父元素上写ul,在子元素内写li时

//父组件
<ul><Item></Item>
</ul>子组件Item
<template><li></li>
</template>

难道你就没有疑问，为什么在使用vue-cli脚手架时，最上层都会是一个template标签，如果你知道vue的html元素整体必须包裹在一个标签内，这个也就是说，我们也可以把这个template标签换成其它标签，毫无疑问，可以，但是你会发现当你审查元素时，使用template时，源代码中没有这个元素，而使用其它元素时，就会有相应的元素，这就是template标签相比其它标签所没有的优势，不可见。

Vue的包裹元素标签template相关推荐

在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...
Vanilla JavaScript 和 Vue 中的 HTML ＜template＞标签
HTML Template Tag in Vanilla JavaScript and Vue - DEV Communityhttps://dev.to/therealdanvega/html-te ...
Vue.js 使用script或template标签创建组件模板内容
为了使HTML代码和JavaScript代码是分离的,便于以后的阅读和维护,我们可以并建议使用<script>或<template>标签创建组件模板内容. <!DOCTY ...
.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...
ref获取元素 vue 删除子元素_vue中的 ref 和 $refs
相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素. // 使用Jquery获取Dom元素值$("#id").text ...
vue中实现tag标签
1,安装scss插件 cnpm i node-sass sass-loader -S 2,安装element-ui cnpm i element-ui -S main.js中引入element-ui ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
vue 拖拽元素到任意位置
vue 拖拽元素到任意位置使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...

Vue的包裹元素标签template

Vue的包裹元素标签template相关推荐

最新文章

热门文章