🙄

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

2021/12/23に公開約1,200字

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>

Discussion

ログインするとコメントできます