vue中v-bind绑定class与style的各种写法

写法

• class对象写法
• class数组写法
• style对象写法
• style数组写法

class对象写法

<script setup lang="ts">
import { ref } from 'vue'
let isActive = ref(true)
let classObj = ref({
  active: true,
  title: false
})
const onBtn = () => {
  isActive.value = !isActive.value 
}
const getClassObj = ()=>{
  return { 
    active: true, 
    title: true 
  } 
}
</script>

<template>
  <div>
    <button @click="onBtn">切换-isActive:{{isActive}}</button>
    <!-- 对象语法: {'active': boolean} -->
    <div :class="{ active: isActive }">呵呵呵呵</div>
    <!-- 也可以有多个键值对 -->
    <div :class="{active: isActive, title: true}">呵呵呵呵</div>
    <!-- 默认的class和动态的class结合 -->
    <div class="abc cba" :class="{active: isActive, title: true}">呵呵呵呵</div>
    <!-- 将对象放到一个单独的属性中 -->
    <div class="abc cba" :class="classObj">呵呵呵呵</div>
    <!-- 将返回的对象放到一个methods(computed)方法中 -->
    <div class="abc cba" :class="getClassObj()">呵呵呵呵</div>   
  </div>
</template>

<style scoped lang="scss">
.active{color: red;}
</style>

class数组写法

<script setup lang="ts">
import { ref } from 'vue'
let isActive = ref(true)
let title = 'aaa'
const onBtn = () => {
  isActive.value = !isActive.value
}
</script>

<template>
  <div>
    <button @click="onBtn">切换-isActive:{{ isActive }}</button>
    <!-- 数组写法 -->
    <div :class="['abc', title]">哈哈哈哈</div>
    <div :class="['abc', title, isActive ? 'active': '']">哈哈哈哈</div>
    <div :class="['abc', title, {active:isActive , ccc:true}]">哈哈哈哈</div>
  </div>
</template>

<style scoped lang="scss">
.active {color: red;}
</style>

style对象写法

<script setup lang="ts">
let finalColor = 'blue'

let finalStyleObj = {
  'font-size': '50px',
  fontWeight: 700,
  backgroundColor: 'red'
}
const getClassObj = ()=>{
  return { 
   'font-size': '50px'
  } 
}
</script>
<template>
  <div>
     <!-- :style="{cssPropertyName: cssPropertyValue}" -->
    <div :style="{color: finalColor, 'font-size': '30px'}">哈哈哈哈</div>
    <div :style="{color: finalColor, fontSize: '30px'}">哈哈哈哈</div>
    <div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">哈哈哈哈</div>
    <!-- 绑定一个data中的属性值, 并且是一个对象 -->
    <div :style="finalStyleObj">呵呵呵呵</div>
    <!-- 调用一个方法 -->
    <div :style="getFinalStyleObj()">呵呵呵呵</div>
  </div>
</template>
<style scoped lang="scss">
.active {color: red;}
</style>

style数组写法

<script setup lang="ts">
let style1Obj = { color: 'blue', fontSize: '30px' }
</script>
<template>
  <div :style="[{color:'red'},style1Obj]">哈哈哈</div>
</template>