當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

VUE v-bind绑定class和style

發布時間：2023/12/2 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE v-bind绑定class和style 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、綁定class

（1）對象語法

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><title>vue示例</title></head><body><div id="app"><div class="static" :class="{'active':isActive,error:isError}">123</div></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">new Vue({el: '#app',data: {isActive: true,isError: true}});</script></body></html>

對象可以傳入多個屬性，：class可以與普通的class共存。

（2）數組語法

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><title>vue示例</title></head><body><div id="app"><div class="static" :class="[activeCls,errorCls]">123</div></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">new Vue({el: '#app',data: {activeCls: 'active',errorCls: 'error'}});</script></body></html>

2、綁定內聯樣式

v-bind:style 給元素綁定內聯樣式，也有對象和數組語法寫法。由于直接寫一長串樣式不便于閱讀和維護，所以一般寫在data或者computed里。

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><title>vue示例</title></head><body><div id="app"><div :style="styles">123</div></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">new Vue({el: '#app',data: {styles: {color: 'red',fontSize: '14px'}}});</script></body></html>

使用;style時vuejs會自動添加前綴。

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的VUE v-bind绑定class和style的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。