Vue.jsを使って切り替えタブを作る
今回はVue.jsを使って簡単な切り替えタブを作っていきたいと思います!
こんな感じのものを作ってみようと思っています↓
HTMLとJSを記述する
まずはhead内でVue.jsを読み込んでいきます。
- HTMLのhead内に記述
-
12345678
<
head
>
・
・
中略
・
・
<
script
src
=
"https://cdn.jsdelivr.net/npm/vue"
></
script
>
</
head
>
これでVue.jsを使う準備ができました!
次にbody内に切り替えタブ部分を記述していきましょう。
- HTMLのbody内に記述
-
12345678910111213141516171819202122232425262728293031323334353637
<
body
>
<
div
id
=
"tabBox"
>
<
div
id
=
"tabs"
>
<
input
type
=
"radio"
value
=
"1"
id
=
"tab1"
v-model
=
"isActive"
></
input
>
<
label
for
=
"tab1"
>タブ1</
label
>
<
input
type
=
"radio"
value
=
"2"
id
=
"tab2"
v-model
=
"isActive"
></
input
>
<
label
for
=
"tab2"
>タブ2</
label
>
<
input
type
=
"radio"
value
=
"3"
id
=
"tab3"
v-model
=
"isActive"
></
input
>
<
label
for
=
"tab3"
>タブ3</
label
>
</
div
>
<
ul
id
=
"contents"
>
<
li
v-if
=
"isActive == '1'"
>
<
p
class
=
"title"
>テスト</
p
>
<
p
>テスト本文テスト本文テスト本文テスト本文テスト本文<
br
>
テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文</
p
>
</
li
>
<
li
v-else-if
=
"isActive == '2'"
>
<
p
class
=
"title"
>テスト2</
p
>
<
p
>テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2<
br
>
テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2</
p
>
</
li
>
<
li
v-else-if
=
"isActive == '3'"
>
<
p
class
=
"title"
>テスト3</
p
>
<
p
>テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3<
br
>
テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3</
p
>
</
li
>
</
ul
>
</
div
>
<!--tabBox-->
<
script
src
=
"./js/func.js"
></
script
>
</
body
>
『#tabs』がタブにあたる部分です。
仕組みとしてはinputのvalueをv-modelを使って『isActive』に渡し、『#contents』の中に表示する要素をv-ifで指定しています。
続いて、『func.js』内にjsの記述をしていきます。
- func.js内の記述
-
123456
new
Vue ({
el:
'#tabBox'
,
data: {
isActive:
'1'
,
}
})
と言っても、記述はこれだけです。
これでシステム自体は完成しています。
実際にタブの切り替えができているはずです!
あとは、CSSでスタイル付けしていくだけです。
CSSを記述する
参考までに、デモで作った切り替えタブのCSSを記述します。
- CSS
-
12345678910111213141516171819202122232425262728293031323334353637383940414243
#tabs {
overflow
:
hidden
;
}
#tabs input {
display
:
none
;
}
#tabs label {
display
: inline-
block
;
line-height
:
40px
;
width
:
120px
;
text-align
:
center
;
cursor
:
pointer
;
background
:
#eee
;
transition:
0.3
s;
border-radius:
10px
10px
0
0
;
}
#tabs input:checked + label,
#tabs label:hover {
background
:
#56B4BE
;
color
:
#fff
;
}
#contents {
width
:
500px
;
height
:
90px
;
padding
:
5px
10px
;
box-shadow:
1px
1px
1px
0
rgba(
0
,
0
,
0
,
0.2
);
border
:
1px
solid
#eee
;
border-top
:
2px
solid
#56B4BE
;
}
#contents p {
font-size
:
15px
;
margin
:
0
;
}
#contents p.title {
font-size
:
16px
;
font-weight
:
bold
;
}
こんな感じでした!
まとめ
いかがでしたでしょうか?
JQueryで作成するよりも、かなりシンプルな記述で作成することができます。
Vue.jsの入門としてもチャレンジしやすいと思うので、ぜひ作ってみてください!
では、また。
2019.01.16