vue开发的组件中,特别是.vue为后缀的文件,常常见到一个<template></template>包裹的一段界面的代码。但你没有发现,当你发布后,查看源码,你会发现这个template标签不见了,这个就是template的核心功能。

        其实template并不是vue特有的标签,据说是2013年各大浏览器就开始支持template了。所在最新的浏览器都支持。

        使用template的好处就是当我们的组件被渲染到页面时,template不会作为div这样的标签,多次循环的时候,它里面的代码就可以多次使用,请看以下代码:

    建立一个AboutView.vue文件,贴上以下代码:

  <template  v-for="item in list" :key="item.id">
    <div>
        <span>{{item.id}}:{{item.text}}</span>
    </div>
   </template>
<script>
export default {
  name: 'AboutView',
  data(){
    return {
      list: [
        {
          id:"1",
          text:"张三"
        },
        {
          id:"2",
           text:"李四"
        },
        {
          id:"3",
          text:"王五"
        }
      ] 
    }
  }
}
</script>

使用这个组件时,会显示什么样的效果呢?

 我们使用了template这个标签,我们在调用这个页面的时候,看源码,却看不到这个template标签:

 结论:

template的作用是一种模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上!

 
 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐