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

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

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

v-bind用于绑定html标签属性。但是,在将 v-bind 用于 classstyle 时,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>

渲染为:<div class='box bkg_red font_blue'></div>
我还是比较喜欢对象语法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值