Help us understand the problem. What is going on with this article?

Vue.jsを使ってBULMAのtabsを切り替える

More than 1 year has passed since last update.

概要

Vue.jsを使う際にCSSのフレームワークを何にするかは、今のところスタンダード的なものは無いように思います。
JQueryを使っていた時代はBootstrap一択だったように思えますが、Vue.jsでBootstrapを使うにはJQueryが必要になってしまうため、いまいちスッキリしません。

そんな訳で今はBULMAを実験的に使ってみています。BULMAは純粋なCSSのみのフレームワークなので何にでも合わせることができますが、動きについては自分でコーディングしなければいけません。

タブの切り替えをVue.jsを使って行う

BULMAのページにはタブのスタイルについては定義がありますが、切り替え方については全く記載がなかったので、Vue.jsを使って切り替えて部分をコーディングしてみました。
特に難しいことはしていませんので、ほぼそのまま組み込むことができると思います。

See the Pen Vue + bulma tabs by jhanyu (@jhanyu) on CodePen.

jhanyu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away