整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
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)系。
