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