Vue学习笔记(4)关于class和style绑定

我们利用Vue中的v-bind指令可以很好进行数据绑定,当然对于class和style也是一样的。

而且v-bind用来绑定class也同时可以和普通的class并存,灵活地运用v-bind来切换class或者style可以做到意想不到的效果。

而且你还可以将一个数组传给v-bind:class,当然使用三元表达式也是没有问题的。

当你想绑定style的时候如何绑定呢

<div v-bind:style="{color:TheColorYouWant}"></div>

如上即可实现绑定。

你也可以绑定到一个对象上

<div v-bind:style="yourStyle"></div>


然后在Vue实例里面的data里写

new Vue({

      el:'#app',

      data:{

        yourStyle:{ color:'red' }  

     }

})


以上就是关于绑定class和style的基本内容,比较简单。

发布了45 篇原创文章 · 获赞 12 · 访问量 4万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章