X

XiaoSong

V1

2023/01/22阅读:12主题:默认主题

class与style绑定

绑定对象法

使用:class写法

<div :class="{active: on}" class="btn" @click="on = true">确定</div>
const on = ref(false)

以上代码中:class中的active是否存在取决于on的值是true还是false。当点击divon的值改为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({ 
    onfalse,
    errtrue
})

最终的代码为:

<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>

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1