vue是三大前端框架之一，深受著前端開發人員的喜歡vue 點擊改變對應樣式，特別感謝尤大大啊，向大神致敬下，哈哈哈！不扯了，回歸正題。本文總結的是vue的樣式綁定方式vue 點擊改變對應樣式，每種方式都有對應的例子給你看，讓你一看就懂，希望對你學習vue的樣式綁定有所幫助。

第1種使用方式：

傳遞一個數組，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數據綁定，請看下 面的例子你就懂了：

我是h3標簽哦！！

第2種使用方式：

在數組中使用三元表達式

我是h3標簽哦！！

<script type="text/javascript">
var vm = new Vue({
el: '#app',

data: {
flag: true,
},
methods: {}
});
</script>

第3種使用方式：

在數組中使用對象來代替三元表達式，提高代碼的可讀性

我是h3標簽哦！！
<script type="text/javascript">

var vm = new Vue({
el: '#app',
data: {
flag: true,
},
methods: {}
});
</script>

第4種使用方式：

在為class 使用 v-bind 綁定對象的時候，對象的屬性是類名，由于對象的屬性可帶引號，也可不帶引號，所以 這里沒寫引號；屬性的值是一個標識符

我是h3標簽哦！！

<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
classObj: { 類名1: true, 類名2: true, 類名3: false, 類名3: false }

},
methods: {}
});
</script>

第5種使用方式：

行內樣式型的方式，對象是無序鍵值對的集合

我是h3標簽哦！！
我是h3標簽哦！！


<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 900 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>