版权声明：版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载 https://blog.csdn.net/qq_37674616/article/details/83096245
目录
绑定class方法
绑定的值字符串绑定
<style>
.bgDiv{
background-color:orange;
}
</style>
<div id="app">
<div :class="bgCls">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgCls:"bgDiv",
}
})
</script>绑定的值对象方法
主要应用于动态切换class
<style>
.bgDiv{
background-color:orange;
}
.textColor{
color:#ededed;
}
</style>
<div id="app">
<div :class="{bgDiv,textColor}">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgDiv:true,
textColor:true
}
})
</script>绑定的值数组语法
当一个类需要多个样式时，则使用数组来绑定样式
<style>
.bgDiv{
background-color:orange;
}
.textColor{
color:#ededed;
}
</style>
<div id="app">
<div :class="[bgCls,textCls]">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgCls:'bgDiv',
textCls:'textColor'
}
})
</script>绑定style方法
绑定的值为字符串
<div id="app">
<div :style="styleDiv">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
styleDiv:'color:red;font-size:16px'
}
})
</script>绑定的值对象方法
<div id="app">
<div :style="styleDiv">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
styleDiv:{
color:'red',
backgroundColor:'orange'
}
}
})
</script>绑定的值数组方法
<div id="app">
<div :style="[styleDiv,styleDiv2]">这个div背景是 orange</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
styleDiv:{
color:'red',
backgroundColor:'orange'
},
styleDiv2:{
fontSize:'20px'
}
}
})
</script>