您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何在vue項(xiàng)目中使用template標(biāo)簽,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
它是可以顯示template標(biāo)簽中的內(nèi)容,但是查看后臺的dom結(jié)構(gòu)不存在template標(biāo)簽。如果template標(biāo)簽不放在vue實(shí)例綁定的元素內(nèi)部默認(rèn)里面的內(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實(shí)例綁定的元素內(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>
將實(shí)例中template屬性值進(jìn)行編譯,并將編譯后的dom替換掉vue實(shí)例綁定的元素,如果該vue實(shí)例綁定的元素中存在內(nèi)容,這些內(nèi)容會直接被覆蓋。
1)如果vue實(shí)例中有template屬性,會將該屬性值進(jìn)行編譯,將編譯后的虛擬dom直接替換掉vue實(shí)例綁定的元素(即el綁定的那個元素);
特點(diǎn):
2)template屬性中的dom結(jié)構(gòu)只能有一個根元素,如果有多個根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個根元素;
3)在該屬性對應(yīng)的屬性值中可以使用vue實(shí)例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í)例中需要設(shè)置的template屬性。
<abc id="first"> <div v-if="flag">{{msg}}<div> <div v-else>111<div> </abc>
上面的實(shí)例還可以寫成下面的形式
<!--此處頁面顯示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項(xiàng)目中使用template標(biāo)簽有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。