<!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>
vue class和style的绑定
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80785587
今日推荐
周排行