绑定vue样式的5种方法

vue是三大前端框架之一,深受着前端开发人员的喜欢,特别感谢尤大大啊,向大神致敬下,哈哈哈!不扯了,回归正题。本文总结的是vue的样式绑定方式,每种方式都有对应的例子给你看,让你一看就懂,希望对你学习vue的样式绑定有所帮助。

绑定vue样式的5种方法_第1张图片

第1种使用方式:

传递一个数组,组值写类名就行了,但class 需要使用v-bind(简写为“:”)做数据绑定,请看下 面的例子你就懂了:

我是h3标签哦!!

 

第2种使用方式:

在数组中使用三元表达式

我是h3标签哦!!

第3种使用方式:

在数组中使用对象来代替三元表达式,提高代码的可读性

我是h3标签哦!!

第4种使用方式:

在为class 使用 v-bind 绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以 这里没写引号;属性的值是一个标识符

我是h3标签哦!!

第5种使用方式:

行内样式型的方式,对象是无序键值对的集合

我是h3标签哦!!

我是h3标签哦!!

你可能感兴趣的:(vue教程)