绑定vue样式的5种方法

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

第1种使用方式：

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

<h3 :class="['类名1', '类名2']">我是h3标签哦！！</h1>

 

第2种使用方式：

在数组中使用三元表达式

<div id="app">

<h3 :class="['类名1', '类名2', flag?'类名3':'']">我是h3标签哦！！</h3>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

flag: true,

},

methods: {}

});

</script>

第3种使用方式：

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

<h3 :class="['类名1', '类名2', {'类名3':flag} ]">我是h3标签哦！！</h3>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

flag: true,

},

methods: {}

});

</script>

第4种使用方式：

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

<div id="app">

<h1 :class="classObj">我是h3标签哦！！</h1>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

classObj: { 类名1: true, 类名2: true, 类名3: false, 类名3: false }

},

methods: {}

});

</script>

第5种使用方式：

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

<div id="app">

<h3 :style="styleObj1">我是h3标签哦！！</h3>

<h3 :style="[ styleObj1, styleObj2 ]">我是h3标签哦！！</h3>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

styleObj1: { color: 'red', 'font-weight': 900 },

styleObj2: { 'font-style': 'italic' }

},

methods: {}

});

</script>