00.内联样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> 默认写法,可以在浏览器中控制台查看其样式 <div style="100px;height:100px;background:blue;"></div> 使用“:”拼接 <div style="100px;height:100px;background:red;" :style="{border:'10px solid red'}"></div> CSS内联样式变量拼接 <div style="100px;height:100px;background:red" :style="{border:borderWidth+'px solid blue',padding:paddingWidth+'px'}"></div> CSS内联样式放置对象 <div :style="styleObj"></div> CSS内联样式放置数组 <div :style="styleArr"></div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ //下面对应CSS内联样式变量拼接 borderWidth:50, paddingWidth:40, //下面对应CSS内联样式放置对象 styleObj:{ "100px", height:"100px", padding:"50px", backgroundColor:"skyblue" }, // 对应CSS内联样式放置数组 styleArr:[ { "100px", height:"100px", backgroundColor:"pink" },{ border:"5px solid red" } ] } }) </script> </body> </html>
01.侧边栏（事例）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> *{ margin:0px; padding:0px; } .page{ width:100vw; height:100vh; background-color:#efefef; position:fixed; left:0; top:0; } .ment{ width:50vw; height:100vh; background-color:skyblue; position:fixed; left:0; top:0; /* transform:translateX(50vw); */ } </style> </head> <body> <div id="app"> <div class="page"> <h3>首页</h3> <button @click="toggleMenu">切换侧边栏</button> </div> <div class="ment" :style="{transform:'translateX('+menuWidth+'vw)'}"> <h3>侧边栏</h3> </div> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ menuWidth:100 }, methods:{ toggleMenu:function(){ if(this.menuWidth==100){ this.menuWidth=50; }else{ this.menuWidth=100; } } } }) </script> </body> </html>