Vuejs學習筆記(一)-8.動態繫結style屬性
阿新 • • 發佈：2021-07-01
v-bind:style用途：動態繫結一些CSS內聯樣式。
demo1（物件語法）:
1.寫CSS屬性名方式1，如fone-size，要以駝峰方式寫：fontSize
2.樣式的值如果非引用，則需要使用單引號
3.樣式的值如果是從其他處匯入，則需要使用變數來儲存
程式碼如下：
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 04-v-bindstyles object.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 22:22 8@version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>04-v-bind 樣式繫結 物件方式</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2 :style="{fontSize:'30px',color:'red'}">{{ message }}</h2> 20<h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{ message2 }}</h2> 21 </div> 22 23 <script src="../js/vue.js"></script> 24 <script> 25 26 const app = new Vue({ 27 el: '#app', 28 data: { 29 message: 'hello', 30 message2: 'vuejs', 31 finalSize:100,32 finalColor:'green' 33 } 34 }) 35 </script> 36 </body> 37 </html>
Demo2:陣列語法（使用場景，可以能多個style分開定義，然後某個標籤需要使用多個style）
程式碼如下：
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 05-v-bind array.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 23:07 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>05-v-bind 動態繫結陣列的語法</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2 :style="[baseStyle1,baseStyle2]">{{ message }}</h2> 20 </div> 21 <script src="../js/vue.js"></script> 22 <script> 23 24 const app = new Vue({ 25 el: '#app', 26 data: { 27 message: 'hello', 28 baseStyle1:{backgroundColor:'red'}, 29 baseStyle2:{fontSize:'100px'} 30 }, 31 }) 32 </script> 33 </body> 34 </html>