Vue.jsでサクッと動きをつける方法とは
先週ICS MEDIAにHTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法という記事が掲載されていた。
便利そうだったのでブックマークしたのだが、コードが最新のVue Composition APIとESモジュールが使われているためIE11には非対応だった。
私の場合IE11も含めてWebサイトを作成する機会がまだあり、最新のVue Composition APIのコードだと都合が悪いのでIE11対応のバージョン2のコードに直してみた。
ハンバーガーボタン
ハンバーガーボタンはisActiveのbooleanを変更するだけなのでdataにisActiveを入れて以下のように修正した。
new Vue({
el: '#app',
data: {
isActive: false
}
})
チェックボックスの状態を監視するフォーム
チェックボックスの状態監視はdataとcomputedに処理を記述。
new Vue({
el: '#app',
data: {
checkBoxState: {
react: false,
angular: false,
vuejs: false,
jquery: false,
nextjs: false,
nuxtjs: false,
typescript: false,
}
},
computed: {
isButtonEnabled() {
return Object.values(this.checkBoxState).filter(button => button === true).length >= 3
}
}
})
入場料の計算
入場料の計算もチェックボックスと同様にdataとcomputedに処理を記述。
new Vue({
el: '#app',
data: {
ADULT_FEE: 1400,
CHILD_FEE: 800,
adult: 0,
children: 0
},
computed: {
entryFee() {
return this.ADULT_FEE * this.adult + this.CHILD_FEE * this.children
}
}
})
ページネーションのある一覧
ページネーションのある一覧はdataとcomputedだけでなくmethodsとmountedも使用。
名前を変えている箇所があるが結果は元記事と同じ。
new Vue({
el: '#app',
data: {
PER_PAGE: 4,
books: null,
page: 1,
page_inc: 4,
page_dec: 4,
},
methods: {
pageIncrement() {
if (this.page === this.maxLength) return
this.page++
},
pageDecrement() {
if (this.page === 1) return
this.page--
},
},
computed: {
currentBooks() {
return this.books.slice((this.page - 1) * this.PER_PAGE, this.page * this.PER_PAGE)
},
maxLength() {
return Math.ceil(this.books.length / this.PER_PAGE)
}
},
mounted() {
(async () => {
const result = await fetch("../assets/json/data.json")
const jsonData = await result.json()
this.books = jsonData
})()
}
})
マスタッシュ記法の非表示はv-cloakを使用
元記事ではsetup()でclass="hideBeforeVue"でマスタッシュ記法を非表示にしているが、一般的にはv-cloak属性を使用する。
<div id="app" v-cloak>
これを付ければCSSに[v-cloak] { visibility: hidden; }を追記しておけばマスタッシュ記法({{ book.name }}など)が見えてしまうことはない。
[v-cloak] {
visibility: hidden;
}
ページネーションのある一覧 サンプルにはv-cloakを追加してあるのでマスタッシュ記法が見えることはない。
