整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
html5中template標(biāo)簽內(nèi)容在頁面中并不會顯示。但是在后臺查看頁面DOM結(jié)構(gòu)卻存在template標(biāo)簽。這是因為template標(biāo)簽天生不可見，它設(shè)置了display:none;屬性。
<!--當(dāng)前頁面只顯示"我是自定義表現(xiàn)abc"這個內(nèi)容，不顯示"我是template",
這是因為template標(biāo)簽天生不可見-->
<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)簽是用來寫 html 模板的，且內(nèi)部必須只有一個根元素，像下面這樣（不然IDE會報錯）
<template>
<div class="demo">
.....
</div>
</template>但有時候我們也會看到，在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>下面我們一起通過瀏覽器dom渲染結(jié)果來看一下template是什么:
<template>
<div class="root">
<template>看看外面的標(biāo)簽是什么</template>
</div>
</template>在瀏覽器中解析完的結(jié)果：
可以看到文字外面是 div.root 所以本質(zhì)上的<template>標(biāo)簽并沒有什么意義。template的作用是模板占位符，可幫助我們包裹元素，但在循環(huán)過程當(dāng)中，template并不會被渲染到頁面上.
我們繼續(xù)看一下剛才的循環(huán)：
<template>
<div class="root">
<template v-for="(item,index) in 5">
<div>測試{{index}}</div>
</template>
</div>
</template>瀏覽器解析后的效果：
不使用template，我們也可以這樣寫：
<template>
<div class="root">
<div v-for="item,index in 5">
<div>測試{{index}}</div>
</div>
</div>
</template>但是這樣循環(huán)出來會多出一層div來。
當(dāng)我們不需要這外層的 div的時候，我們可以采用上面的方法，在 <template>標(biāo)簽上使用 v-for來循環(huán)。或者這樣寫：
<template>
<div class="root">
<div v-for="item,index in 5" :key="index">測試{{index}}</div>
</div>
</template>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這些指令。
TML5 元素有多種維度展示方式，常見以下：
根元素
參考文獻(xiàn)：
前話
Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網(wǎng)站模板，div加css布局，網(wǎng)頁資源分開存儲以便管理，網(wǎng)頁結(jié)構(gòu)清晰簡單，希望本篇能夠助力各位萌新
主題
《周末の食記》
美食能撫平一切的憂傷
簡介
文件結(jié)構(gòu)包含了css、fonts、images、js和html，運用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">揚州炒飯</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">觸動您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級的夏威夷果仁，入口絲滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>結(jié)語
如果人的一生總的能量是固定的話，那就節(jié)省開支，延長時間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態(tài)
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
