關于vue.js中class與style綁定的練習代碼，分享給大家，供大家參考：
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vuejs中Class與Style 綁定</title><link rel="stylesheet" href="css/vuetext.css"></head><body><!-- 數據綁定常見的需求是綁定class和內聯樣式v-bind 可以綁定屬性class --><!-- 這個表示如果isactive是true時 class就與active綁定 --><div id="app-1" v-bind:class="{ active: isActive }">猴猴呀</div><!-- 還可以綁定靜態樣式--> <div id="app-2" class="static" v-bind:class="{ active: isActive }">lowrie</div><!-- 還可以直接綁定數據里的一個對象--> <div id="app-3" v-bind:class="classObject">猴猴呀</div><div id="app-4" v-bind:class="[activeClass, errorClass]">lowrie</div><!-- 關于vue組件會專門再學習 --><!-- v-bind綁定內聯樣式與綁定class類似 數組 對象 --> <script src="js/vue.js"></script><script src="js/vuetext.js"></script></body></html>js:
var app = new Vue({el: '#app-1',data: {message: 'Hello Vue!',isActive: true,}});var app2 = new Vue({el: '#app-2',data: {message: 'Hello Vue!',isActive: true,}});var app3=new Vue({el:'#app-3',data: {classObject: {active: true,}}});var app4=new Vue({el:'#app-4',data:{activeClass: 'active',errorClass: 'text-danger'}});css:
.active{color: #FFA07A;};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
