12.2 VUE學習之控制行內樣式
阿新 • • 發佈:2019-01-06
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="vue"> <div :style="{color:red,fontSize:size+'px'}">測試一</div> <input type="number" v-model="size"> <div :style="div2">測試二</div> <!--可以用div2變數--> <div :style="[div2]">測試三</div> <!--也可以寫成陣列的形式--> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2:{ color:'red', background:'yellow', width:'30%' } } }); </script> </html>
效果: