一、html5中的template標(biāo)簽

html中的template標(biāo)簽中的內(nèi)容在頁(yè)面中不會(huì)顯示。但是在后臺(tái)查看頁(yè)面DOM結(jié)構(gòu)存在template標(biāo)簽。這是因?yàn)閠emplate標(biāo)簽天生不可見(jiàn)，它設(shè)置了display:none;屬性。

<!--當(dāng)前頁(yè)面只顯示'我是自定義表現(xiàn)abc'這個(gè)內(nèi)容，不顯示'我是template',這是因?yàn)閠emplate標(biāo)簽天生不可見(jiàn)--><template><div>我是template</div></template><abc>我是自定義表現(xiàn)abc</abc>二、template標(biāo)簽操作的屬性和方法 content屬性:在js中template標(biāo)簽對(duì)應(yīng)的dom對(duì)象存在content屬性，對(duì)應(yīng)的屬性值是一個(gè)dom節(jié)點(diǎn)，節(jié)點(diǎn)的nodeName是#document-fragment。通過(guò)該屬性可以獲取template標(biāo)簽中的內(nèi)容，template對(duì)象.content可以調(diào)用getElementById、querySelector、querySelectorAll方法來(lái)獲取里面的子節(jié)點(diǎn)。 innerHTML:可以獲取template標(biāo)簽中的html。

<template id='tem'> <div id='div1'>我是template</div> <div>我是template</div></template><script> let o = document.getElementById('tem'); console.log(o.content.nodeName);//#document-fragment console.log(o.content.querySelectorAll('div'));//NodeList(2) [div#div1, div]。得到一個(gè)類數(shù)組 console.log(o.content.getElementById('div1'));//<div id='div1'>我是template</div> console.log(o.innerHTML);//’<div id='div1'>我是template</div><div>我是template</div>’</script>三、vue中的template 1、template標(biāo)簽在vue實(shí)例綁定的元素內(nèi)部

它是可以顯示template標(biāo)簽中的內(nèi)容，但是查看后臺(tái)的dom結(jié)構(gòu)不存在template標(biāo)簽。如果template標(biāo)簽不放在vue實(shí)例綁定的元素內(nèi)部默認(rèn)里面的內(nèi)容不能顯示在頁(yè)面上，但是查看后臺(tá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)容在頁(yè)面中不顯示，但是在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='http://m.baoyu77737.com/bcjs/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'對(duì)template標(biāo)簽來(lái)說(shuō)不起作用。但是此時(shí)的template標(biāo)簽支持v-if、v-else-if、v-else、v-for這些指令。

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

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

1）如果vue實(shí)例中有template屬性，會(huì)將該屬性值進(jìn)行編譯，將編譯后的虛擬dom直接替換掉vue實(shí)例綁定的元素（即el綁定的那個(gè)元素）；2）template屬性中的dom結(jié)構(gòu)只能有一個(gè)根元素，如果有多個(gè)根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個(gè)根元素；3）在該屬性對(duì)應(yīng)的屬性值中可以使用vue實(shí)例data、methods中定義的數(shù)據(jù)。

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

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

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

上面的實(shí)例還可以寫(xiě)成下面的形式

<!--此處頁(yè)面顯示hello--><div id='app'></div><script src='http://m.baoyu77737.com/bcjs/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>'//模板中只能有一個(gè)根元素，如果有多個(gè)需要使用v-if、v-else、v-else-if來(lái)選擇顯示哪一個(gè) });</script>

到此這篇關(guān)于詳解template標(biāo)簽用法(含vue中的用法總結(jié))的文章就介紹到這了,更多相關(guān)template標(biāo)簽用法內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！