vue动态绑定class和style

最新推荐文章于 2022-12-04 00:45:08 发布

敲起来blingbling

最新推荐文章于 2022-12-04 00:45:08 发布

阅读量588

点赞数

分类专栏：前端笔记文章标签： vue style class

本文链接：https://blog.youkuaiyun.com/weixin_45695200/article/details/121251160

版权

前端笔记专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了Vue.js中如何动态地添加和绑定样式（style）及类（class）。从简单的字符串样式到复杂的对象和数组表达式，包括三元运算符和条件判断，展示了Vue.js在DOM操作上的灵活性。同时，介绍了动态绑定class的多种方式，如对象语法、计算属性和数组。这些技巧对于提升Vue.js应用的用户体验和交互性至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加style

<div :style="s1">123</div>
<div :style="s2">123</div>
<div :style="s3">123</div>
<div :style="{ color: color1 , fontSize: fontsize1 + 'px'}">123</div>
<div :style="`color: ${color1}`">123</div>
<div :style='"color: " + color1'>123</div>
<!-- 数组 -->
<div :style="[s4, s5]">123</div>

<!-- 三目运算符 -->
<div :style="{ color: (num == 1 ? color2:'red')}">123</div>
<div :style="[{ color: (num != 1 ? color2:'blue')},{fontSize:'20px'}]">123</div>

<!-- [多重值] 此时，浏览器会根据运行支持情况进行选择 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
    <div>1</div>
    <div>2</div>
</div>

data: {
        color1: 'red',
        fontsize1: 60,
        num: 1,
        color2: 'green',
        s1: 'color: orange;',
        s2: { color: 'pink' }, // key-value形式
            
        // 多个key-value形式样式，style属性名有-的改为驼峰式
        s3: { color: 'skyblue', fontSize: '20px' }, 
        s4: { color: 'orange' },
        s5: { fontSize: '50px', fontWeight: 'bold' },
      }

动态绑定class

<div :class="{ 'active': isActive }"></div>
<div :class="{'active':isActive == index}"></div>
<div :class="{ 'active': isActive, 'sort': isSort }"></div>

<div :class="classObject"></div>

classObject:{ active: true, sort:false }

或使用computed属性

data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }
}

3 数组

<div :class="[isActive,isSort]"></div>

isActive:'active',
isSort:'sort'

数组与三元运算符结合判断选择需要的class
（注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）

<div :class="[isActive?'active':'']"></div>
<div :class="[isActive === index?'active':'otherClass']"></div>

数组对象结合动态判断

// 前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
<div :class="[{ active: isActive }, 'sort']"></div>
<div :class="[{ active: isActive === index }, 'sort']"></div>