今天就跟大家聊聊有關(guān)如何在vue項目中使用template標(biāo)簽，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到黃浦網(wǎng)站設(shè)計與黃浦網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋黃浦地區(qū)。

 1、template標(biāo)簽在vue實例綁定的元素內(nèi)部

它是可以顯示template標(biāo)簽中的內(nèi)容，但是查看后臺的dom結(jié)構(gòu)不存在template標(biāo)簽。如果template標(biāo)簽不放在vue實例綁定的元素內(nèi)部默認里面的內(nèi)容不能顯示在頁面上，但是查看后臺dom結(jié)構(gòu)存在template標(biāo)簽。

<div id="app">
 <!--此處的template標(biāo)簽中的內(nèi)容顯示并且在dom中不存在template標(biāo)簽-->
 <template>
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<!--此處的template標(biāo)簽中的內(nèi)容在頁面中不顯示，但是在dom結(jié)構(gòu)存在該標(biāo)簽及內(nèi)部結(jié)構(gòu)-->
<template id="tem">
 <div id="div1">我是template</div>
 <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

注意： vue實例綁定的元素內(nèi)部的template標(biāo)簽不支持v-show指令，即v-show="false"對template標(biāo)簽來說不起作用。但是此時的template標(biāo)簽支持v-if、v-else-if、v-else、v-for這些指令。

<div id="app">
 <template v-if="true">
 <!--此時template標(biāo)簽中的內(nèi)容顯示在頁面上，但是看dom結(jié)構(gòu)沒有template標(biāo)簽-->
 <div>我是template</div>
 <div>我是template</div>
 </template>
 <div v-if="true">
 <!--此時頁面上顯示div標(biāo)簽中的內(nèi)容，并且看dom結(jié)構(gòu)存在最外面的div標(biāo)簽-->
 <div>我是template</div>
 <div>我是template</div>
 </div>
 <!--此處會輸出6個‘我是template'并且dom結(jié)構(gòu)中不存在template標(biāo)簽-->
 <template v-for="a in 3">
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

2、vue實例中的template屬性

將實例中template屬性值進行編譯，并將編譯后的dom替換掉vue實例綁定的元素，如果該vue實例綁定的元素中存在內(nèi)容，這些內(nèi)容會直接被覆蓋。
特點：

1）如果vue實例中有template屬性，會將該屬性值進行編譯，將編譯后的虛擬dom直接替換掉vue實例綁定的元素（即el綁定的那個元素）；

2）template屬性中的dom結(jié)構(gòu)只能有一個根元素，如果有多個根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個根元素；

3）在該屬性對應(yīng)的屬性值中可以使用vue實例data、methods中定義的數(shù)據(jù)。

<!--此處頁面顯示hello-->
<div id="app"></div>
<!--此處template標(biāo)簽必須在vue綁定的元素外面定義，并且在頁面中不顯示下面的template標(biāo)簽中的內(nèi)容-->
<template id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"#first"//通過該屬性可以將自定義的template屬性中的內(nèi)容全部替換app的內(nèi)容，并且會覆蓋里面原有的內(nèi)容，并且在查看dom結(jié)構(gòu)時沒有template標(biāo)簽
 });
</script>

上面的例子中html中的template標(biāo)簽可以變成自定的標(biāo)簽，如下。但是下面這種方式也可以將<abc></abc>標(biāo)簽中的內(nèi)容替換掉app元素，但是<abc></abc>標(biāo)簽中的內(nèi)容也會顯示在頁面上。所以此處利用template標(biāo)簽來定義vue實例中需要設(shè)置的template屬性。

<abc id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</abc>

上面的實例還可以寫成下面的形式

<!--此處頁面顯示hello-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一個根元素，如果有多個需要使用v-if、v-else、v-else-if來選擇顯示哪一個
 });
</script>

看完上述內(nèi)容，你們對如何在vue項目中使用template標(biāo)簽有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章標(biāo)題：如何在vue項目中使用template標(biāo)簽-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article16/ghgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、電子商務(wù)、網(wǎng)頁設(shè)計公司、虛擬主機、響應(yīng)式網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)