有的東西，看似簡單，實則不簡單，還是要多總結，在真實項目當中予以應用。
在vue當中綁定class和style的方式有很多種，基本都知道，但是在項目當中真正遇到需要用樣式變化呢的場景卻怎么也想不起來，很模糊，只能寫一些簡單地樣式邏輯，今天來總結一下vue中動態綁定樣式的情況。
demo01:
點擊激活按鈕flag變量取反，切換div class類名應用isActive類或者不應用isActive類。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .isActive { background: red } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <div :class="{'isActive':flag}"> 我是一個div </div> <button @click="flag=!flag">激活</button> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { flag: false } }, }) </script> </html>
demo02:
兩個按鈕分別對isred和isblue變量做取反，盒子本來有個類名circle，動態添加isred和isblue類，class和:class可以共存
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 22:41:24 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 22:49:16 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .isActive { background: red } .bg-red { background: red; } .text-blue { color: blue } .circle { width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <div class="circle" :class="{'bg-red':isred,'text-blue':isblue}"> 我是一個div </div> <button @click="isred=!isred">激活</button> <button @click="isblue=!isblue">激活</button> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { isred: false, isblue: false } } }) </script> </html>
demo03:
當:class的表達式過長或邏輯復雜時，還可以綁定一個計算屬性，一般當條件多余2個時，都可以使用data或者computed，例如使用計算屬性：
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:03:05 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 23:10:22 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .active { color: blue; background: red; } .error-info { color: black; background: #ccc; } .circle { width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <div class="circle" :class="classes"> 我是一個div {{isred}} {{isblue}} </div> <button @click="isred=!isred">激活</button> <button @click="isblue=!isblue">激活</button> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { isred: false, isblue: false } }, computed: { classes() { return { active: this.isred && this.isblue, 'error-info': !this.isred && !this.isblue, } } } }) </script> </html>
demo04
盒子擁有多個類名，則用數組語法標識 注意：帶中划線的類型需要加引號！
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:03:05 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 23:21:53 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .red { background: red; } .text-blue { color: blue } .circle { width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <div :class="[red,'text-blue',circle]"> 我是一個div </div> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { red: 'red', 'text-blue': 'text-blue', circle: 'circle' } }, computed: { } }) </script> </html>
demo05
數組語法配合三元表達式或者對象語法 注：第一種三元表達式和第二種對象語法效果是一樣的
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:03:05 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 23:26:56 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .red { background: red; } .text-blue { color: blue } .circle { width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <div :class="[isred? red:'','text-blue',circle]"> 我是一個div </div> <div :class="[{'red':isred},'text-blue',circle]"> 我是一個div </div> <button @click="isred=!isred"></button> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { red: 'red', 'text-blue': 'text-blue', circle: 'circle', isred: false } }, computed: { } }) </script> </html>
demo06
利用計算屬性動態生成盒子類名，通過下拉框控制btn-large btn-middle btn-small的切換，通過disabled變量控制btn-disabled的添加與移除。
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:33:25 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 23:42:28 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .btn-disabled { background: #aaa; } .btn-large { width: 200px; height: 80px; } .btn-middle { width: 120px; height: 60px; } .btn-small { width: 80px; height: 50px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <button :class="dynamicClass">我是動態按鈕</button> <select v-model="size"> <option value="">請選擇</option> <option value="large">大</option> <option value="middle">中</option> <option value="small">小</option> </select> <button type="button" @click="disabled=!disabled">切換動態按鈕是否禁用</button> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { size: '', disabled: true } }, computed: { dynamicClass() { return [ 'btn', { ['btn-' + this.size]: this.size !== "", ['btn-disabled']: this.disabled } ] } } }) </script> </html>
demo07
綁定在組件上 注：組件上綁定的class會渲染到組件根元素上！
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:33:25 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-27 23:53:27 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .red { color: red } .fontClass { font-size: 55px } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <div id="app"> <my-component :class="{'red':isred}"></my-component> <button @click="isred=!isred">點擊切換</button> </div> </body> <script> Vue.component("my-component", { template: "<p>我是一段文本</p>" }) var app = new Vue({ el: "#app", data() { return { isred: false } }, computed: { } }) </script> </html>
demo08
內聯樣式，也有數組語法，對象語法，復雜且長可以寫到data或computed中
秒收目錄站https://www.tomove.com.cn
<!-- * @Descriptions: * @Version: * @Author: * @Date: 2020-07-27 23:33:25 * @LastEditors: dongwenjie * @LastEditTime: 2020-07-28 00:05:16 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <body> <div id="app"> <div> <el-color-picker v-model="color"></el-color-picker> <div :style="{'color':color,'fontSize':fontSize+'px'}">內聯style</div> <button @click="fontSize++">加大字號</button> </div> </div> </body> <script> var app = new Vue({ el: "#app", data() { return { color: null, fontSize: 12 } }, computed: { } }) </script> </html>