Vue入门---属性、style和class绑定方法

一 、用对象的方法绑定class

   
   
   
   
   



   
我是娃哈哈
 

实现效果:

关于使用对象绑定class,还可以用另外一种写法:

   
   
   
   
   



   
我是娃哈哈
 

image

二 、用数组的方法绑定class

   
   
   
   
   



   
我是娃哈哈
 

实现效果:

其实在数组中还可以用判断是否显示这个类名,举个例子:

   
   
   
   
   



   
我是娃哈哈
 

实现效果是:

image

三、 用数组和对象混合的方法绑定class

   
   
   
   
   



   
我是娃哈哈
 

实现的效果:

四、 用对象的方式实现style绑定

   
   
   
   
   



   
我是娃哈哈
 

实现效果如下:

其实也可以写为第二种方式:

   
   
   
   



   
我是娃哈哈
 

实现结果是:

五、 用数组和对象混合的方式实现style绑定

   
   
   
   



   
我是娃哈哈
 

实现效果：

六、绑定属性

v-bind:src=""

width/height/title....
简写：:**src="" ** 推荐
效果能出来，但是会报一个404错误
v-bind:src="url" alt=""> 效果可以出来，不会发404请求 推荐使用
以上就是vue中绑定style和class还有属性的方法，希望对大家有帮助！