溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何在vue.js中綁定class，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
具體如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app1"> <!--# 給v-bind設置一個對象，可以動態地切換class #--> <div :class="{'active':isActive}">app1</div> </div> <div id="app2"> <!--# 給v-bind設置一個對象，可以動態地切換class #--> <!--# 對象中也可以傳入多個屬性，來動態切換class。另外，:class可以與普通class共存 #--> <div class="static" :class="{'active':isActive,'error':isError}">app2</div> </div> <div id="app3"> <!--# 給v-bind設置一個對象，可以動態地切換class #--> <!--# 當:class的表達式過長或邏輯復雜時，還可以綁定一個計算屬性，這是一種很友好和常見的用法，一般當條件多于兩個時，都可以使用data或computer #--> <div :class="classes">app3</div> </div> </body> </html> <script> //例子一 var app1 = new Vue({ el:'#app1', data:{ //類名isActive，當其為true時，div會擁有類名active，為false時則沒有 isActive:true } }); //例子二 var app2 = new Vue({ el:'#app2', data:{ //類名isActive，當其為true時，div會擁有類名active，為false時則沒有 isActive:true, //類名isError，當其為true時，div會擁有類名error，為false時則沒有 isError:true } }); //例子三 var app3 = new Vue({ el:'#app3', data:{ isActive:true, isError:false }, computed:{ classes:function () { return { active:this.isActive && !this.isError } //除了計算屬性，你也可以直接綁定一個Object類型的數據，或者使用類似計算機屬性的methods } } }) </script>
上述就是小編為大家分享的如何在vue.js中綁定class了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
