【Vue.js】ボタンの切り替えテクニック

モダンなサイトだと、ボタンをクリックしたらアイコンが切り替わって、内容が見れたりするようなUIも増えてきていますよね。

そんなボタンの切り替えの構造をVue.js(Nuxt.js)で表現していこうと思います！

ボタンを押すと、記事内容の表示・非常時を切り替えられる

ボタンをそして、あるデータの真偽値を変化させる

<v-btn @click="show = !show" icon>
</v-btn>

<script>
expprt default {
  data () {
    return {
      show: false
    }
  }
}
</script>

ボタンを押すと、falseの真偽値が切り替わる

showの真偽値によって変化する者たち

<v-btn @click="show = !show" icon>
  <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-btn>

showの真偽値、そして三項演算子によって、アイコンの見た目が変わるようになっている。

<v-expand-transition>
  <div v-show="show">
    <v-divider></v-divider>
    <v-card-text>
      <ul>
        <li v-for="item in items" :key="item.id">
          <a href="item.url">{{ item.title }}</a>
        </li>
      </ul>
    </v-card-text>
  </div>
</v-expand-transition>

v-showの真偽値がtrueの場合は、div以下のコンポーネントが表示されて、falseの時は隠れるようになっている。

パスワードの入力内容を見たり、隠したりする

<v-text-field 
  label="パスワード"
  v-model="signupForm.password"
  @click:append="show = !show"
></v-text-field>

appendはボタンの配置を設定している

<script>
expprt default {
  data () {
    return {
      show: false
    }
  }
}
</script>

例の如く、showの真偽値をボタンによって切り替えている。

showの真偽値によって、テキスト内容を見たり隠したりする

<v-text-field 
  label="パスワード"
  v-model="signupForm.password"
  :type="show ? 'text' : 'password'"
  :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
  @click:append="show = !show"
></v-text-field>

type属性をshowによって紐づけ(bind)て、入力フォームのタイプを切り替えている
iconもshowによって紐づけ(bind)て、アイコンの見た目を切り替えている