v-bindを使ったcssの操作方法（備忘録） by vue

class編

• クラスの選択が簡易な場合を想定（htmlに直接書き込む）

:class="{
    'cssのクラス名': 条件式(ex.aaa===bbb)',
    'cssのクラス名': 条件式'
}

or

:class="条件式 ? 'cssのクラス名' : 'cssのクラス名' "

複数の条件式なら配列化

:class="[条件式 ? 'cssのクラス名' : 'cssのクラス名',
	条件式 ? 'cssのクラス名' : 'cssのクラス名'] "

• クラスの選択が複雑な場合（computedを利用）

:class="computed名"

style編

• cssの値を変動させたい場合

<div :style="{ fontSize : size + 'px' }">フォント</div>

上記の確認コード

<template>
<button @click="onActive">活動・非活動</button>

<p>class</p>
<div :class="{box:active===true}"></div>
<hr>
<div :class="[active===true ? 'box' : '',]"></div>
<hr>
<div :class="boxObject"></div>
<hr>
<p>style</p>
<div :style="{fontSize:size+'px'}">フォント</div>
<hr>
<div :style="{'fontSize:25px;':active===true}">フォント1</div>

</template>
<script>
import { computed, defineComponent,ref} from "vue"
export default defineComponent ({
  setup () {
    const active=ref(false)
    const onActive=()=>{
      active.value=!active.value
    }
    const boxObject=computed(()=>{
      return {
        box:active.value===true
      }
    })

    const size=ref('25')
    return{
      active,
      onActive,
      boxObject,
      size
    }
  }
})
</script>
<style lang="scss">
.box{
  width:100px;
  height: 100px;
  background-color: red;
  
}
</style>