Vue动态绑定class

我们在学习js时有学到过如何去动态切换元素的样式,具体有以下步骤:

  1. 先获得元素

  2. 修改样式。通过className或者style修改

    
    
    
    
    

用js能达到动态修改样式的效果,但是会有点繁琐不方便,当要动态修改的样式一多就会使代码变得特别冗长,不利于维护。说到这就要请出今天的主角vue大兄弟出来了,没错今天呢就要讲讲vue如何动态绑定class与style。

class动态绑定

为了证明这一方法好用就先改改上面的代码。





 
     
       

vue中通过v-bind(:)动态绑定data属性class1,当点击按钮时便触发change方法将class1的值变换从而改变div的样式。从上面看来比原生js动态改变元素样式的方法方便的多。动态样式的实现其实也能理解成将class看成一个变量,通过改变class的值去动态切换样式。

对class动态绑定有了大概了解后,接下来再深入了解。

添加class

上面代码中有两个class不同的是后一个class增加了v-bind(:),猜想会有人认为class2会将class1的样式进行覆盖,但是因为增加了v-bind而使本应该覆盖的情况转换成了添加,也就是说后面div的样式会呈现出下面这样的效果

添加class数组

如果需要为一个元素添加多个样式可以使用此种方法

hi,everyone!!
data: {       classNames: ['class1', 'class2', 'class3']       }

使用数组的方法可以很快速的添加或者删除样式。

也可以使用以下这种方法,但是这种方法弊端多,不建议使用只做了解

hi,everyone!!

添加class对象

这种方法用于已确定使用的样式,但是现在某种样式不显示或显示

语法

对象名:{
    样式1:true|false,
    样式2:true|false
}

具体实现

要求样式1显示而样式2不显示

hi,everyone!!
data:{ objClass:{ class1:true, class2:flase } }

也可以使用以下这种方法,但是这种方法弊端多,不建议使用只做了解

hi,everyone!!

案例:实现多种样式间的随机切换



​

    
       
hi,everyone!!
           

style动态绑定

css中为一个元素添加内联样式一般用

现在我们有需求希望将font-size的值改为动态绑定,因此我们可以使用vue中的style动态绑定,先来改动上面的代码。

可以看到在vue中将font-size改成了fontSize这是因为vue中命名规则需将以横线命名改为驼峰命名,另外,style中有多个属性所以要以对象的形式包装多个属性,以上style样式也可以写成这样

data:{
    style:{
    fontSize:'30px',
    color:'blue'
    }
}

style对象写法

对象中的属性必须是css包含有的属性,只需更改成vue认可的命名规则即可,如:fontSize(font-size)、backgroundColor(background-color)


    
      head,yes  
 

Vue动态绑定class_第1张图片

style数组的写法


    
     
head,yes
//数组格式方法一      
head
//数组格式方法二  
 

你可能感兴趣的:(Vue,vue.js,javascript)