vue3 class与style绑定 与 script setup使用

vue3 class与style绑定

一、绑定class

• v-bind:class 简写 : class

<template>
    <!--第1种，普通语法-->
    <p class="activeStyle">1:放置字符串</p>

    <!--第2种，对象语法,可多个，与普通共存-->
    <p v-bind:class="{ activeStyle: true }">2.1:直接使用</p>
    <p v-bind:class="classObj">2.2:存在data</p>

    <!--第3种，数组语法-->
    <p v-bind:class="[{ activeStyle: true }]">3.1:直接使用</p>
    <p v-bind:class="[classObj]">3.2:存在data</p>
    <p v-bind:class="[isActive?classObj:'']">3.3:放表达式</p>
</template>

<script>
export default {
    data() {
        return {
            classObj: { activeStyle: true },
            isActive:true,
        }
    }
}
</script>

<style>
.activeStyle {
    font-size: 50px;
}
</style>

---

效果

一共有3种类型，基本，对象，数组

二、绑定style

<template>
    <!--第1种，普通语法-->
    <p style="font-size:50px">1:放置字符串</p>

    <!--第2种，对象语法,可多个，与普通共存-->
    <p v-bind:style="{ fontSize:'50px' }">2.1:直接使用</p>
    <p v-bind:style="classObj">2.2:存在data</p>

    <!--第3种，数组语法-->
    <p v-bind:style="[{fontSize:'50px'}]">3.1:直接使用</p>
    <p v-bind:style="[classObj]">3.2:存在data</p>
    <p v-bind:style="[isActive ? classObj : '']">3.3:放表达式</p>
</template>

<script>
export default {
    data() {
        return {
            classObj: { fontSize:'50px' },
            isActive:true,
        }
    }
}
</script>

注意：
如css有-，则用大写，驼峰样式；如 font-size:50px => fontSize: ‘50px’
数组语法可放多个样式
与class对比，style没有 true与false选项

三、< script setup > 使用两者

class绑定

<template>
    <!--第1种，普通语法-->
    <p class="activeStyle">1:放置字符串</p>

    <!--第2种，对象语法,可多个，与普通共存-->
    <p v-bind:class="{ activeStyle: true }">2.1:直接使用</p>
    <p v-bind:class="classObj">2.2:存在data</p>

    <!--第3种，数组语法-->
    <p v-bind:class="[{ activeStyle: true }]">3.1:直接使用</p>
    <p v-bind:class="[classObj]">3.2:存在data</p>
    <p v-bind:class="[isActive?classObj:'']">3.3:放表达式</p>
</template>

<script setup>
import { ref, reactive} from 'vue'
const classObj=reactive({activeStyle: true})
const isActive=ref(true)
</script>

<style>
.activeStyle {
    font-size: 50px;
}
</style>

对象用 reactive
单个用 ref