template标签有什么用？(2020.02.07).md

<template></template>有什么用？

参考haha_ying_haha博客

• 学习：
  1. html5中的template标签(具体可见./cases/template.html)
  • html5提供的新标签，更加规范和语义化；可以把列表项放入template中，进行批量渲染

  template元素设置了display: none

  <template id="tmpl">
    <div class="title">template context</div>
  </template>

  // js中如何获取template中的dom元素
  const tmpl = document.getElementById("tmpl")
  const content = document.content
  /*
  * tmpl.content
  * #document-fragment
  *   <div class="title">template context</div>
  */
  const title = content.querySelector('.title')

  content属性获取内部dom支持getElementById、querySelector、querySelectorAll

  2. vue中的template标签
  • 条件渲染：元素上使用v-if条件渲染分组

  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>

  • 条件渲染：用key管理可复用的元素

  <!--这两个元素是完全独立的，不要复用它们-->
  <!--添加一个具有唯一值的key属性-->
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
  </template>

  • 条件渲染：v-show

  v-show不支持template，也不支持v-else

  • 列表渲染: v-for中使用分组

  <ul>
    <template v-for="item in list">
      <li class="base">{{item.base}}</li>
      <li class="divider"></li>
    </template>
  </ul>

  • 列表渲染：v-for with v-if

  不推荐在同一个元素上使用v-for和v-if，可以其中之一使用在<template>元素上