概要
入力欄にカーソルがfocusした時だけ指定のcssを適用させたかったので、v-bindディレクティブ(下記は省略記法)を使って、classを動的なのものにした
実際のコード
<template><div:class="{ 'input_box': true, 'shadow_input_box': active }">
// 省略
<inputtype="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:0px0px3pxgrey;}</style>
- 入力欄にカーソルがあたった時のみシャドウつけたい(上記のCSSを適用させたい)ので、scriptは次のようになる
<script>exportdefault{data(){return{active:false// 初期値}},methods:{onFocus(){this.active=true// シャドウがつく},onBlur(){this.active=false// シャドウはつかない}}}</script>