vue中绑定class与style的几种写法

最新推荐文章于 2025-05-13 09:54:01 发布

valentinelzt

最新推荐文章于 2025-05-13 09:54:01 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/valentinelzt/article/details/104469054

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用v-bind指令动态地绑定class和style属性，包括绑定单个class、多个class、对象绑定以及绑定样式对象。通过实例展示了如何将变量和条件表达式用于class和style的动态绑定。

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

具体代码如下

<template>
  <div class="home">
    <!-- 绑定一个class -->
     <div :class="bgc">绑定class</div>
     <!-- 绑定多个class -->
     <div :class="[classB, classC]">绑定多个class</div>
     <!-- 对象绑定 -->
     <div :class="classobj">对象绑定(对象值为true才显示) -- > 写法1</div>
     <div :class="{current: true, focus: false}">对象绑定(对象值为true才显示)  --- > 写法2</div>
     <div :class="{current: isCurrent, focus: isFocus}">将value设置为变量也可</div>
    <!-- 绑定style -->
    <div :style="{color: 'red', fontSize: '20px'}">绑定样式  对象绑定</div>
    <div :style="{color: color, fontSize: ft}">绑定样式  对象绑定  将属性值设置为变量 </div>
    <div :style="styleObj">绑定样式  对象绑定  将属性值设置为变量 </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      classA: 'bgc',
      classB: 'cb',
      classC: 'cc',
      classobj: {
        current: true,
        focus: false
      },
      isCurrent: true,
      isFocus: false,
      color: 'blue',
      ft: '30px',
      styleObj: {
        color: 'yellow',
        fontSize: '30px'
      }
    }
  }
}
</script>