七、vue操作元素样式
1.当一个class需要绑定对个属性时
<style type="text/css">
.colorStyle{
color:green
}
.width100{
width:100%
}
</style>
<div :class="[colorStyle,widthStyle]"></div>
<script>
new Vue({
el:"#app",//div的id
data:{
colorStyle:"green",
widthStyle:"width100"
}
});
//监听link属性,当link的值发生变化时,对应的watch就会被触发
</script>
2.绑定style
第一种
<div :style="{backgroundColor:divColor}"></div>
//backgroundColor就是background-color,但是在这样json方式的绑定上,必须得backgroundColor这样用
<script>
new Vue({
el:"#app",//div的id
data:{
divColor:"green"
}
});
</script>
第二种
<div :style="divStyle"></div>
//backgroundColor就是background-color,但是在这样json方式的绑定上,必须得backgroundColor这样用
<script>
new Vue({
el:"#app",//div的id
data:{
divStyle:{
backgroundColor:"green",
width:"100px",
height:"100px"
}
}
});
</script>
第三种
<div :style="[divStyle,{backgroundColor:divColor}]"></div>
//backgroundColor就是background-color,但是在这样json方式的绑定上,必须得backgroundColor这样用
<script>
new Vue({
el:"#app",//div的id
data:{
divStyle:{
backgroundColor:"green",
width:"100px",
height:"100px"
}
}
});
</script>