- 说明
- 设置一个对象，可以动态地切换class
- 对象中也可以传入多个属性，来动态切换class,另外，:class可以与普通class共存
- class的表达式过长或者逻辑复杂时候，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed
- 基础使用
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
</style>
<div id="app">
<button :class="btnClass">绑定对象</button>
</div>
<script>
/**
* 静态绑定
*/
new Vue({
el: "#app",
data: {
// 当btnClass改变时将更新class
btnClass:'btn'
}
})
</script>
<!--渲染之后 -->
<button class="btn">绑定按钮</button>
- 绑定对象
<style>
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
</style>
<div id="app">
<!-- 这里的active单引号可加不加可不加 多个对象用,逗号隔开 -->
<!-- 注意使用-命名一定要加下 单引号 '' -->
<p class="btn" :class="{ 'active':isActive,'btn-default':isDefault }" v-text="shop.title"></p>
</div>
<div id="app">
<button :class="{btn:isActive,'btn-default':isDefault}">绑定按钮</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: false
isDefault: true,
}
})
</script>
<!-- 渲染之后 -->
<button class="btn btn-default">绑定对象</button>
- 绑定多个对象(data里面中声明)
:class="btnClass"
<script>
new Vue({
el: "#app",
data: {
btnClass:{
btn:isActive,'btn-default':isDefault
}
}
})
</script>
- 绑定多个对象(computed里面中声明)
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
<div id="app">
<button class="btn" :class="btnClass" @mouseenter="isEnter" @mouseleave="isLeave">绑定多个属性</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isActive: false,
isDefault: true,
},
computed: {
btnClass: function () {
return {
'btn-default': this.isDefault,
'active': this.isActive,
}
}
},
methods: {
isEnter: function () {
this.isActive = true;
},
isLeave: function () {
this.isActive = false;
}
}
})
- 说明
当需要应用多个class，可以使用数组语法，给:class 绑定一个数组，应用一个class列表
- 单纯数组
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
</style>
<div id="app">
<button class="btn" :class="['btn-default','active']">绑定多个属性</button>
</div>
<script>
const vm = new Vue({
el: "#app",
})
</script>
<!--渲染之后 -->
<button class="btn btn-default active">绑定多个属性</button>
- 数组+对象+三则运算
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
</style>
</head>
<body>
<div id="app">
<!-- 注意 class最好加上单引号，否则有可能不能正确渲染-->
<!-- <button class="btn" :class="['btn-default','active']">绑定多个属性</button>-->
<!-- 不能使用data里的对象,否则不能正确渲染-->
<button class="btn" :class="[{active: isActive},isDanger ? 'btn-danger':'']">绑定数组</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
btnDefault: 'btn-default',
isActive: true,
isDanger: true,
},
})
</script>
<!--渲染后 -->
<button class="btn active btn-danger">绑定数组</button>
- 说明
使用v-bind:style="" 或者:style语法，style与class类似，可以给元素绑定内联样式,也有对象语法和数组语法,看起来很直接在元素上写CSS
- 基本使用
<div id="app">
<a href="#" :style="{'color':color,'font-size':fontSize + 'px','text-decoration':textDecoration}">绑定内联样式</a>
</div>
<script>
/**
* 静态绑定
*/
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 18,
textDecoration: 'none'
}
})
</script>
- 绑定对象动态修改
<div id="app">
<a href="#" :style="aStyle" @mouseover="aMouseOver" @mouseout="aMouseOut">直接使用对象</a>
</div>
<script>
/**
* 静态绑定
*/
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 18,
textDecoration: 'none',
// 或者
aStyle: {
color: 'black',
fontSize: 18 + 'px',
textDecoration: 'none',
},
},
methods: {
aMouseOver: function () {
this.aStyle.color = 'red'
},
aMouseOut: function () {
this.aStyle.color = 'black'
}
}
})
- 绑定数组
<div id="app">
<!-- 在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面 -->
<a href="#" :style="[aBase,aFont]">绑定数组</a>
</div>
<script>
/**
* 静态绑定
*/
new Vue({
el: "#app",
data: {
aBase: {
color: 'red',
},
aFont: {
fontSize: 16 + 'px',
textDecoration: 'none',
},
},
})
