class与style的绑定
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.active{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- <div class="page"></div> -->
<!--通过对象的方式决定是否存在某个类-->
<div :class="{active:isTrue}"></div><!--:绑定-->
<!-- 直接放置对象 -->
<div class="page" :class="styleObj"></div>
<!-- 放置数组 -->
<div class="page" :class="styleArr"></div>
<!-- 放置字符串 -->
<div class="page" :class="styleStr"></div>
<!-- 数组和对象混合使用 -->
<div class="page" :class="styleArrObj"></div>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
isTrue:true,
styleObj:{active:true,laochen:true},
styleArr['col-xs-12','red-bg'],
styleStr:"abc def ghi",
styleArrObj:['abc',{active:true}]
}
})
</script>
</body>
写法一:通过对象的方式决定是否存在某个类
<div :class="{active:isTrue}"></div>
当isTrue为true时则给绑定了active的盒子显示active的样式。当isTrue为false时,则不显示active设置的样式。即通过对象的方式决定是否存在某个类。
当设置了class=“page”的同时也可以绑定:class,并且浏览器会自动拼接,即class=“page active”。
写法二:直接放置对象
<div class="page" :class="styleObj"></div>
这时浏览器自动拼接为class=“page active laochen”
注:data:{
isTrue:true//可设置多个
styleObj:{active:true,laochen:true,"col-lg-6":true}
}
当对象中-时必须使用引号将其改变为字符串
写法三:放置数组
<div class="page" :class="styleArr"></div>
这时浏览器自动拼接为class=“page col-xs-12 red-bg”,添加和删除也是使用数组方式
写法四:放置字符串
<div class="page" :class="styleStr"></div>
这时浏览器自动拼接为class=“page abc def ghi”
四种方式可以混合进行:数组和对象混合使用
<div class="page" :class="styleArrObj"></div>
当active为true时浏览器自动拼接为class=“page abc active”,当active为false时浏览器自动拼接为class=“page abc”
绑定内联式
<body>
<div id="app">
<div style="width: 100px;height: 100px;background: #0000FF;"></div>
<!-- CSS内联样式变量拼接 -->
<div style="width: 100px;height: 100px;background: #0000FF;"
:style="{border:borderWidth+'px solid red'}"></div>
<!-- CSS内联样式放置对象 -->
<div :style="styleObj"></div>
<!-- CSS数组的方式拼接 -->
<div :style="styleArr"></div>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
borderWidth:50,
styleObj:{
width:"200px",
height:"300px",
padding:"50px",
'background-color':"skyblue"
}
styleArr:[
{
width:"200px",
height:"300px",
padding:"50px",
'background-color':"skyblue"
},{
border:"30px solid yellow"
}
]
}
})
</script>
</body>
写法一:CSS内联样式变量拼接
在浏览器中被拼接为<div style="width: 100px;height: 100px;background: #0000FF;border:50px solid red;"></div>
写法二:CSS内联样式放置对象
在浏览器中被拼接为<div style="width: 200px; height: 300px; padding: 50px; background-color: skyblue;"></div>
写法三:CSS数组的方式拼接
在浏览器中被拼接为<div style="width: 200px; height: 300px; padding: 50px; background-color: skyblue; border: 30px solid yellow;"></div>
实例:侧边栏切换
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page{
width: 100vw;
height: 100vh;
background-color: #efefef;
position: fixed;
left: 0;
right: 0;
}
.rMenu{
width: 20vw;
height: 100vh;
position: fixed;
left: 0;
right: 0;
transform: translateX(100vw);
background: skyblue;
transition: transform 1s;
}
.active{
transform: translateX(50vw);
}
</style>
</head>
<body>
<div id="app">
<div class="page">
首页
<button @click="toggleMenu" type="button">切换侧边栏</button>
</div>
<div class="rMenu":class="{active:isShow}">
侧边栏
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
toggleMenu:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>