vue模板標(biāo)簽怎么用

這篇文章將為大家詳細(xì)講解有關(guān)vue模板標(biāo)簽怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

模板標(biāo)簽的另一種用途

該template標(biāo)簽可以在模板內(nèi)的任何地方使用，以更好地組織代碼。

我喜歡用它來(lái)簡(jiǎn)化v-if邏輯，有時(shí)v-for也是。

在這個(gè)例子中，我們有幾個(gè)元素都使用相同的v-if條件：\

<template>
  <div class="card">
    <img src="imgPath" />
    <h4>
      {{ title }}
    </h4>
    <h5 v-if="expanded">
      {{ subheading }}
    </h5>
    <div v-if="expanded" class="card-content">
      <slot/>
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

這有點(diǎn)笨拙，一開(kāi)始并不明顯，一堆這些元素被顯示和隱藏在一起。在更大、更復(fù)雜的組件上，這可能是更糟糕的情況！

但我們可以解決這個(gè)問(wèn)題。

我們可以使用template標(biāo)簽對(duì)這些元素進(jìn)行分組，并將其提升v-if到template標(biāo)簽本身：\

<template>
  <div class="card">
    <img src="imgPath" />
    <h4>
      {{ title }}
    </h4>
    <template v-if="expanded">
      <h5>
        {{ subheading }}
      </h5>
      <div class="card-content">
        <slot/>
      </div>
      <SocialShare/>
    </template>
  </div>
</template>

關(guān)于“vue模板標(biāo)簽怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。