vue class和style的繫結
阿新 • • 發佈：2019-01-23
<!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> <style> .red{ color: red; } .font{ font-size: 50px; } .line{ text-decoration: underline; } </style> <script src="./vue.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'.box', data:{ style01:{ "color":"red", "font-size":"30px", "font-weight":"bold" }, style02:{ "text-decoration":"underline" }, isLine:true, claList:['line','font'], oObj:{ red:false, font:true }, isTrue:true, classStr:'red line' } }) } </script> </head> <body> <div class="box"> <!-- style的樣式操作 --> <p :style="style01">style的樣式操作</p> <p :style="[style01,style02]">style的樣式操作0000000002</p> <!-- 類名稱的繫結 以下這麼多種方式熟練使用一種即可--> <p :class="isLine?'line':'red'">三目運算子</p> <p :class="claList">列表模式</p> <p :class="['red','line']">列表</p> <!-- js物件 --> <p :class="oObj">js物件</p> <!-- {類名稱:變數} --> <p :class="{line:isTrue}">{類名稱:變數}</p> <!-- 字串 推薦熟練使用這種方式!!!--> <p :class="classStr">字串</p> </div> </body> </html>