Vue 樣式繫結 && 條件渲染
阿新 • • 發佈：2022-05-24
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 樣式繫結</title> 6 <style> 7 .basic{ 8 width: 400px; 9 height: 100px; 10 border: 1px solid black; 11 } 12 .happy{ 13 border: 4px solid red; 14 background-color: rgba(255, 255, 0, 0.644); 15 background: linear-gradient(30deg, yellow, pink, orange, yellow); 16 } 17 .sad{ 18 border: 4px dashed rgb(2, 197, 2); 19 background-color: gray; 20 } 21 .normal{ 22 background-color: skyblue; 23 } 24 .div1{ 25 background-color: yellowgreen; 26 } 27 .div2{ 28 font-size: 30px; 29 text-shadow: 2px 2px 10px red; 30 } 31 .div3{ 32 border-radius: 20px; 33 } 34 </style> 35 <script type="text/javascript" src="../js/vue.js"></script> 36 </head> 37 <body> 38 <!-- 39 繫結樣式： 40 1.class樣式 41 寫法：class="xxx" xxx可以是字串、物件、陣列 42 字串寫法適用於 雷鳴不確定，要動態獲取 43 物件寫法適用於：要繫結多個樣式，個數不確定，名字也不確定 44 陣列寫法使用於：要繫結多個樣式，個數確定，名字也確定，但不確定用不用 45 2.style樣式 46 ：style="fontSize: xxx" 其中xxx是動態值 47 ：style="[a, b]"其中a、b是樣式物件 48 49 --> 50 <div id="root"> 51 <!-- 繫結class樣式--字串寫法，適用於：樣式的類名不確定，需要動態指定 --> 52 <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/> <br/> 53 54 <!-- 繫結class樣式--陣列寫法，適用於：要繫結的樣式個數不確定、名字也不確定 --> 55 <div class="basic" :class="classArr">{{name}}</div> <br/> <br/> 56 57 <!-- 繫結class樣式，物件寫法，適用於：要繫結的樣式個數、名字確定，但要動態決定啟不啟用它 --> 58 <div class="basic" :class="classObj">{{name}}</div> <br/> <br/> 59 60 <!-- 繫結style樣式-物件寫法 --> 61 <div class="basic" :style="styleObj">{{name}}</div> <br/> <br/> 62 63 <!-- 繫結style樣式-陣列寫法 --> 64 <div class="basic" :style="styleArr">{{name}}</div> <br/> <br/> 65 </div> 66 </body> 67 68 <script type="text/javascript" > 69 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 70 let vm = new Vue({ 71 el: '#root', 72 data:{ 73 name: 'BaiYeShu', 74 mood: 'normal', 75 classArr: ['div1', 'div2', 'div3'], 76 classObj:{ 77 div1: true, 78 div2: true, 79 div3: true 80 }, 81 styleObj:{ 82 color: "red", 83 fontSize: "40px", 84 backgroundColor: 'orange' 85 }, 86 styleArr:[ 87 { 88 color: "red", 89 fontSize: "40px", 90 }, 91 { 92 backgroundColor: 'orange' 93 } 94 ] 95 }, 96 methods:{ 97 changeMood(e){ 98 const arr = ['happy', 'sad', 'normal']; 99 const index = Math.floor(Math.random()*3); 100 this.mood = arr[index]; 101 } 102 } 103 }); 104 </script> 105 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 條件渲染</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 條件渲染： 11 1.v-if 12 寫法： 13 . v-if="表示式" 14 . v-else-if="表示式" 15 . v-else 16 適用於：切換平率較低的場景 17 特點：不展示的DOM元素直接被移除 18 注意：v-if可以和：v-else-if、v-else一起使用。但要求結構不能被“打斷”。 19 2.v-show 20 寫法：v-show="表示式" 21 適用於：切換頻率較高的場景 22 特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉 23 3.備註：使用v-if的時候，元素可以無法獲取到，而使用v-show一定可以獲取到。 24 --> 25 <div id="root"> 26 <h2>當前n的值是:{{n}}</h2> 27 <button @click="n++">點我n+1</button> 28 <!-- 使用v-show做條件渲染 --> 29 <!-- <h2 v-show="false">歡迎來到{{name}}!</h2> 30 <h2 v-show="1 === 1">歡迎來到{{name}}!</h2> --> 31 32 <!-- 使用v-if做條件渲染 --> 33 <!-- <h2 v-if="false">歡迎來到{{name}}!</h2> 34 <h2 v-if="1 === 1">歡迎來到{{name}}!</h2> --> 35 36 <!-- 使用v-else和v-else-if做渲染 --> 37 <div v-if="n === 1">Angular</div> 38 <div v-else-if="n === 2">React</div> 39 <div v-else-if="n === 3">Vue</div> 40 <div v-else>哈哈</div> 41 42 <!-- v-if與temolate配合使用 --> 43 <template v-if="n === 1"> 44 <h2>hello</h2> 45 <h2>{{name}}</h2> 46 <h2>BeiJing</h2> 47 </template> 48 </div> 49 </body> 50 51 <script type="text/javascript" > 52 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 53 let vm = new Vue({ 54 el: '#root', 55 data:{ 56 name: 'BaiYeShu', 57 n: 0 58 }, 59 }); 60 </script> 61 </html>