class与style绑定

绑定对象法

使用:class写法

<div :class="{active: on}" class="btn" @click="on = true">确定</div>

const on = ref(false)

以上代码中:class中的active是否存在取决于on的值是true还是false。当点击div后on的值改为true，则active存在，样式随之发生改变。效果如下:

点击前： 点击后: 渲染后的代码为:

<div class="btn active" @click="on = true">确定</div>

可以在:class="{}"中写多个calss

<div 
     :class="{active: on, err: isErr}" 
     class="btn" 
     @click="isErr = true">
     危险
</div>

const on = ref(true)
const isErr = ref(true)

最终代码:

<div  
     class="btn active err" 
     @click="isErr = true">
     危险
</div>

不一定要写成内联样式，也可以直接绑定一个对象:

<div :class="classObj" class="btn">危险</div>

const classObj = reactive({ 
    on: false,
    err: true
})

最终的代码为:

<div class="btn err">确定</div>

绑定一个返回对象的计算属性:

这是一种很好用的技巧

<div :class="classObj" class="btn">危险</div>

const on = ref(true)
const list = ref(null)

const classObj = computed(() => { 
    return { 
        err: on.value && !list.value
    }
})

最终渲染后的代码:

<div class="btn err">确定</div>