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="width:100px;height:100px;background:blue;"></div>
使用“:”拼接
<div style="width:100px;height:100px;background:red;" :style="{border:'10px solid red'}"></div>
CSS内联样式变量拼接
<div style="width: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:{
width:"100px",
height:"100px",
padding:"50px",
backgroundColor:"skyblue"
},
// 对应CSS内联样式放置数组
styleArr:[
{
width:"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>