vuejs基础-style样式
- 2019 年 10 月 10 日
- 筆記
class样式和内联style样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.min.js" ></script> <style> .red{ color:red; } .thin{ font-weight:200; } .italic{ font-style:italic; } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!--<h1 class="red thin">这是一个测试标签，看它的变化</h1>--> <!--<h1 :class="['red','thin','italic']">这是一个测试标签，看它的变化</h1>--> <!--<h1 :class="['red','thin',flag? 'active': '']">这是一个测试标签，看它的变化</h1>--> <!--<h1 :class="['red','thin',{active:flag}]">这是一个测试标签，看它的变化</h1>--> <!--<h1 :class="{red:true,thin:false,active:flag}">这是一个测试标签，看它的变化</h1>--> <h1 style="color:'red'; 'font-weight':'100px'">这是一个测试标签，看它的变化</h1> <!--<h1 :style="['classobj','classobj2']">这是一个测试标签，看它的变化</h1> <h1 :style="{color:'red', 'font-weight':'100px'}">这是一个测试标签，看它的变化</h1> <h1 :style="{color:'red', 'font-weight':'100px'}">这是一个测试标签，看它的变化</h1>--> </div> </body> <script> new Vue({ el:"#app", data:{ flag:true, classobj:{red:true,thin:false,active:true}, classobj2:{red:false,thin:false,active:true} }, methods:{} }); </script> </html>
