html5中template標(biāo)簽內(nèi)容在頁(yè)面中并不會(huì)顯示。但是在后臺(tái)查看頁(yè)面DOM結(jié)構(gòu)卻存在template標(biāo)簽。這是因?yàn)?span style="color: #1A74FF; --tt-darkmode-color: #1A74FF;">template標(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>
.vue 文件的基本結(jié)構(gòu)如下:
<template>
........
</template>
<script>
export default {
name: "demo"
}
</script>
<style scoped>
.demo {
font-size: 28px;
}
</style>
上面template標(biāo)簽是用來(lái)寫 html 模板的,且內(nèi)部必須只有一個(gè)根元素,像下面這樣(不然IDE會(huì)報(bào)錯(cuò))
<template>
<div class="demo">
.....
</div>
</template>
但有時(shí)候我們也會(huì)看到,在template上使用for循環(huán):
<template>
<div class="root">
<!--在template上使用for循環(huán)-->
<template v-for="item,index in 5">
<div>{{index}}---{{item}}</div>
</template>
</div>
</template>
下面我們一起通過(guò)瀏覽器dom渲染結(jié)果來(lái)看一下template是什么:
<template>
<div class="root">
<template>看看外面的標(biāo)簽是什么</template>
</div>
</template>
在瀏覽器中解析完的結(jié)果:
可以看到文字外面是 div.root 所以本質(zhì)上的<template>標(biāo)簽并沒(méi)有什么意義。template的作用是模板占位符,可幫助我們包裹元素,但在循環(huán)過(guò)程當(dāng)中,template并不會(huì)被渲染到頁(yè)面上.
我們繼續(xù)看一下剛才的循環(huán):
<template>
<div class="root">
<template v-for="(item,index) in 5">
<div>測(cè)試{{index}}</div>
</template>
</div>
</template>
瀏覽器解析后的效果:
不使用template,我們也可以這樣寫:
<template>
<div class="root">
<div v-for="item,index in 5">
<div>測(cè)試{{index}}</div>
</div>
</div>
</template>
但是這樣循環(huán)出來(lái)會(huì)多出一層div來(lái)。
當(dāng)我們不需要這外層的 div的時(shí)候,我們可以采用上面的方法,在 <template>標(biāo)簽上使用 v-for來(lái)循環(huán)。或者這樣寫:
<template>
<div class="root">
<div v-for="item,index in 5" :key="index">測(cè)試{{index}}</div>
</div>
</template>
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這些指令。
TML5 元素有多種維度展示方式,常見(jiàn)以下:
根元素
參考文獻(xiàn):
前話
Hello,小伙伴們大家新年好,本篇是今年第一篇,也籌劃許久,本篇主題為美食,系html5網(wǎng)站模板,div加css布局,網(wǎng)頁(yè)資源分開(kāi)存儲(chǔ)以便管理,網(wǎng)頁(yè)結(jié)構(gòu)清晰簡(jiǎn)單,希望本篇能夠助力各位萌新
主題
《周末の食記》
美食能撫平一切的憂傷
簡(jiǎn)介
文件結(jié)構(gòu)包含了css、fonts、images、js和html,運(yùn)用html5技術(shù),包括nav標(biāo)簽、header標(biāo)簽和footer標(biāo)簽等,采用bootstrap進(jìn)行布局
圖摘
目錄
編碼
<div class="ftco-46-row d-flex flex-column flex-lg-row">
<div class="ftco-46-text ftco-46-arrow-right">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">揚(yáng)州炒飯</h3>
<p class="mb-5">一碗不一樣的炒飯,讓你難以拒絕.</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
<div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
<div class="ftco-46-text ftco-46-arrow-up">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">藍(lán)莓酸奶冰激凌</h3>
<p class="mb-5">觸動(dòng)您的心靈,令人甜蜜至極,難以忘懷,心曠神怡的味覺(jué)享受,精選一級(jí)的夏威夷果仁,入口絲滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>
結(jié)語(yǔ)
如果人的一生總的能量是固定的話,那就節(jié)省開(kāi)支,延長(zhǎng)時(shí)間,喜怒哀樂(lè)不溢于言表,不困于心智,保持樂(lè)觀心態(tài)
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。