内容简介：如果数据属性 发生改变，我们可以把一个数组传给
如果数据属性 发生改变， class
列表将相应地更新
<div id="app">
<div v-bind:class="{active:isActive}"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:true
}
});
</script>
v-bind:class
指令也可以与普通的 class
属性共存
.active{
width: 100px;
height: 100px;
background: red;
}
<div id="app">
<div class = "box" v-bind:class="{active:isActive}"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:true
}
});
</script>
可以直接绑定数据里的一个对象
.active1{
width: 100px;
height: 100px;
margin-top: 10px;
border: 1px solid #ccc ;
}
<div id="app">
<div v-bind:class="classObj"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
classObj:{
active:true,
aaa:false
}
}
});
</script>
可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式
<style>
.aaa{
background: green;
width: 100px;
height: 100px;
margin-top: 10px;
}
</style>
<div id="app">
<div v-bind:class="Obj"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:true
},
computed:{
Obj:function(){
return{
aaa:this.isActive
}
}
}
});
</script>
1.2 数组语法
我们可以把一个数组传给 v-bind:class
，以应用一个 class
列表
<style>
.active{
width: 100px;
height: 100px;
background: red;
}
.active1{
color: yellow;
}
.aaa{
border: 5px solid #ccc;
}
</style>
<div id="app">
<div class = "box" v-bind:class="[isActive,isActive1,isActive2]">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:"active",
isActive1:"active1",
isActive2:"aaa"
}
});
</script>
可以用三元表达式
<style>
.active{
width: 100px;
height: 100px;
background: red;
}
.active1{
color: yellow;
}
.aaa{
border: 5px solid #ccc;
}
</style>
<div id="app">
<div class = "box" v-bind:class="[isActive,isActive1,isActive5 ? isActive2 : '']">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive5:false,
isActive:"active",
isActive1:"active1",
isActive2:"aaa"
}
});
</script>
当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法
<style>
.active{
width: 100px;
height: 100px;
background: red;
}
.active1{
color: yellow;
}
.aaa{
border: 5px solid #ccc;
}
</style>
<div id="app">
<div class = "box" v-bind:class="[isActive,{active1:isActive5},isActive5 ? isActive2 : '']">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive5:true,
isActive:"active",
isActive1:"active1",
isActive2:"aaa"
}
});
</script>
1.3 在组件上
在一个自定义组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖
<style>
.active1{
width: 100px;
background: red;
}
.aaa{
border: 5px solid #ccc;
}
.bbb{
height: 100px;
}
</style>
<div id="app">
<tanchu v-bind:class="classObj"></tanchu>
</div>
<script>
Vue.component('tanchu', {
template: `<div class="bbb">
<input type="button" value="弹出"/>
</div>`
})
var app = new Vue({
el:"#app",
data:{
classObj:{
active1:true,
aaa:true
}
}
})
</script>
二、绑定内联样式
2.1 对象语法
<div id="app">
<div v-bind:style="{background:a,border:b,width:c}">内联样式</div>
<div v-bind:style="classObj">内联样式</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
a:"red",
b:"5px solid #ccc",
c:"100px"
classObj:{
background:"red",
border:"5px solid #ccc",
width:"100px",
marginTop:"10px"
}
}
})
</script>
2.2 数组语法
<div id="app">
<!-- 数组语法 -->
<div v-bind:style="[classObj,classObj1]">内联样式</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
classObj:{
background:"red",
border:"5px solid #ccc",
width:"100px"
},
classObj1:{
height:"100px"
}
}
})
</script>
以上所述就是小编给大家介绍的《vue之class与style绑定（三）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Golang Echo数据绑定中time.Time类型绑定失败
- 如何在Symfony的表单中添加一个未绑定字段,否则绑定到一个实体？
- js双向绑定
- 延迟静态绑定——static
- 绑定自定义事件
- angular组件双向绑定
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Swift编程权威指南（第2版）
[美] Matthew Mathias、[美] John Gallagher / 陈晓亮 / 人民邮电出版社 / 2017-6 / 89.00元
Big Nerd Ranch是美国一家专业的移动开发技术培训机构，本书是其培训教材。书中系统讲解了在iOS和macOS平台上，使用苹果的Swift语言开发iPhone、iPad和Mac应用的基本概念和编程技巧。主要围绕使用Swift语言进行iOS和macOS开发，结合大量代码示例，教会读者利用高级iOS和macOS特性开发真实的应用。一起来看看 《Swift编程权威指南（第2版）》 这本书的介绍吧!
