vue动态绑定类名

最新推荐文章于 2024-06-20 10:43:02 发布

梦里花落多少

最新推荐文章于 2024-06-20 10:43:02 发布

阅读量3.4k

点赞数 6

文章标签： vue vue.js 前端框架

本文链接：https://blog.csdn.net/qq_45887784/article/details/124878474

版权

1.通过对象绑定

<div :class="{ status1: item.state=='空闲' , status2: item.state=='拥挤' }"></div>

data() {

return {

item：{ state: '空闲' }

}

}

// 当state为‘空闲’时绑定status1类名，为‘拥挤’时绑定status2类名

2.通过数组绑定

<div :class=" [ item.state1, item.state2 ]"></div>

data() {

return {

item：{ state1: 'active'，state2: 'active-color' }

}

}

// 给div同时绑定了active、active-color两个类名

3.通过表达式绑定

<div :class=" item.state=='空闲' ? 'status1':'status2' "></div>

data() {

return {

item：{ state: '空闲' }

}

}

4.通过计算属性绑定

<div v-for="(item, index) in infoArr" :key="index">

<span :class="getClassName(item.state)">{{ item.name }}</span>

</div>

data() {

return {

                 infoArr : [{state:' 空闲 ' ，name: ' 状态1 '}, {state: ' 拥挤 '，name: ' 状态2 '}]

        }

}

computed:{

        getClassName(){

return function(val) {

return val == '空闲' ？'state1' : 'state2'

                }

        }

}