vue的样式绑定方式大全

 分类:vue教程时间:2018-12-20点击:

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

vue的样式绑定方式大全

第1种使用方式:

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

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

第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">
<h3 :class="classObj">我是h3标签哦!!</h3>
</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>

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: