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

【Nuxt.js】v-bindを使ってclassを動的なものにする (入力欄にカーソルがfocusした時だけ指定のcssを適用させる)

概要

入力欄にカーソルがfocusした時だけ指定のcssを適用させたかったので、v-bindディレクティブ(下記は省略記法)を使って、classを動的なのものにした

実際のコード

<template>
  <div :class="{ 'input_box': true, 'shadow_input_box': active }">
    // 省略
    <input type="text" @focus="onFocus" @blur="onBlur" />
  </div>
</template>
  • 'input_box': trueとした場合、input_box classに適用されているstyleが常に適用される (falseにすれば適用されなくなる)
<style>
.input_box {
  // 常に適用したいプロパティ: ; を記載
}
</style>
  • shadow_input_box classには以下のCSSを指定
<style>
.shadow_input_box {
  box-shadow: 0px 0px 3px grey;
}
</style>
  • 入力欄にカーソルがあたった時のみシャドウつけたい(上記のCSSを適用させたい)ので、scriptは次のようになる
<script>
export default {
  data() {
    return {
      active: false  // 初期値
    }
  },
  methods: {
    onFocus() {
      this.active = true  // シャドウがつく
    },
    onBlur() {
      this.active = false  // シャドウはつかない
    }
  }
}
</script>
katu_
学習記録のためにQiita始めました
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