概要
Vue.jsでヘッダーを共通化して利用できるようにする。
v-forを使用して配列に入れた要素を呼び出す。
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title></title>
</head>
<body>
<div id="header">
<ul class="header-menu">
<li v-for="(item, i) in menus" :key="i" class="menu-item">
<a :href="item.path">{{item.label}}</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./script/script.js"></script>
</body>
</html>
Vue.JS
script.js
// header
new Vue({
el: "#header",
data() {
return {
menus: [
{
label: "TOP",
path: "./index.html",
},
{
label: "AAA",
path: "./aaa.html",
},
{
label: "BBB",
path: "./bbb.html",
},
{
label: "CCC",
path: "./ccc.html",
},
{
label: "DDD",
path: "./ddd.html",
},
{
label: "EEE",
path: "./eee.html",
},
{
label: "FFF",
path: "./fff.html",
},
],
};
},
});
CSS
style.css
.header-menu {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 12px;
margin: 0;
background: #e8e8e8;
}
完成図
感想
共通化できるようになり手間が減った。