vue.js初级入门之v-bind的class

最新推荐文章于 2025-06-11 19:50:48 发布

roury

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

分类专栏：系统学习学习 vue

本文链接：https://blog.youkuaiyun.com/roury/article/details/84839221

学习同时被 3 个专栏收录

9 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

系统学习

3 篇文章

订阅专栏

本文详细介绍了Vue.js中v-bind:class的使用方法，包括对象语法和数组语法。通过实例展示了如何使用匿名对象、引用对象名及计算属性来动态绑定class，以及如何利用数组语法实现更复杂的样式控制。

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

v-bind用于绑定html标签属性。但是，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、对象语法

1.匿名对象：直接在html指定boolean变量名，在data中对变量赋值

    <!--匿名对象-->
    <div id="simple">
        <div class="box" v-bind:class={bkg_red:isRed,font_blue:isBlue}>匿名对象</div>    
    </div>
    <script>
        var simple = new Vue({
            el:"#simple",
            data:{
                isRed:true,
                isBlue:false,
            }
        })
    </script>

2.引用对象名：html中只指定了对象名，data中对对象的具体属性进行赋值

<!--引用对象名-->
    <div id="objectName">
        <div class="box" v-bind:class="classObject">引用对象名</div>    
    </div>
    <script>
        var simple = new Vue({
            el:"#objectName",
            data:{
                classObject:{
                    bkg_red:true,
                    font_blue:false,
                },
            }
        })
    </script>

3.使用计算属性：类似2，不同的是，对象中变量的值可通过其他变量运算得出

<!--引用计算属性computed-->
  <div id="computedClass">
      <div class="box" v-bind:class="computedClass">引用计算属性computed</div>    
  </div>
  <script>
      var computedClass = new Vue({
          el:"#computedClass",
          data:{
              isRed:true,
              isBlue:false,
              error:null
          },
          computed:{
              computedClass:function () {
                  return {
                      bkg_red:this.isRed && !this.error,
                      font_blue:this.isBlue && !this.error
                  }
              }
          }
      })
  </script>

总结：从1到3，结构上趋向封装，赋值方式趋向丰富

二、数组语法

    <!--数组语法-->
  <div id="arrayClass">
      <div class="box" v-bind:class="[bkgClass,fontClass]">引用计算属性computed</div>    
  </div>
  <script>
      var computedClass = new Vue({
          el:"#arrayClass",
          data:{
              bkgClass:'bkg_red',//数组的键值对赋值，key键为虚拟dom中class的绑定数值，value值为实际dom中的class名
              fontClass:'font_blue',
          },
      })
  </script>