Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8725

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

$
0
0

概要

入力欄にカーソルが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>

Viewing all articles
Browse latest Browse all 8725

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>