Class与Style绑定
绑定HTML Class
对象语法:我们可以传给 v-bind:class
一个对象,以动态地切换 class
<template>
<div>
<p v-bind:class="styleObj">Vue.js</p>
</div>
</template>
<script>
export default {
name:"Style",
data(){
return{
styleObj:{
active:true,
'demo':false
}
}
}
}
</script>
<style>
.active{
color: red;
}
</style>
当active为true和'demo'为false的时候
效果图:
当active为true和'demo'为true的时候
效果图:
当active或者'demo'变化时,class列表将相应地更新。
们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
<template>
<div>
<p v-bind:class="styleObj">Vue.js</p>
</div>
</template>
<script>
export default {
name: "Style",
data() {
return {
isActive: true,
isDemo: true
}
},
computed: {
styleObj() {
return {
"active": this.isActive,
"demo": this.isDemo
}
}
}
}
</script>
<style>
.active {
color: red;
}
</style>
数组语法:我们可以把一个数组传给 v-bind:class
,以应用一个 class 列表
<template>
<div>
<p v-bind:class="[demo1,demo2]"></p>
</div>
</template>
<script>
export default {
name: "Style",
data() {
return {
demo1:"demo11",
demo2:"demo22"
}
}
}
</script>
<style>
.active {
color: red;
}
</style>
效果图:
绑定内联样式
v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:
<template>
<div>
<p v-bind:style="stob">Vue.js</p>
</div>
</template>
<script>
export default {
name: "Style",
data() {
return {
stob:{
color:"red",
fontSize:"40px"
}
}
},
}
</script>
<style>
</style>
效果图: