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>
原文地址：http://tangjiusheng.com/vue/164.html
閱讀更多 湯久生前端 的文章
關鍵字: 組值 編程語言 JavaScript
