文章目录
Class 与 Style 绑定
在实际开发中经常会遇到动态操作元素样式的需求。因此,vue 允许开发者通过 v-bind 属性绑定指令,为元素动态绑定 class 属性的值和行内的 style 样式。
1 动态绑定 HTML 的 class
可以通过三元表达式,动态的为元素绑定 class 的类名。
<template>
<div>
<h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3>
<button @click="isItalic = !isItalic">Toggle Italic</button>
</div>
</template>
<script>
export default {
name: 'MyStyle',
data() {
return {
// 字体是否倾斜
isItalic: false,
}
},
}
</script>
<style lang="less">
// 倾斜字体
.italic {
font-style: italic;
}
</style>
2 以数组语法绑定 HTML 的 class
如果元素需要动态绑定多个 class 的类名,此时可以使用数组的语法格式:
<template>
<div>
<h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">MyStyle 组件</h3>
<button @click="isItalic = !isItalic">Toggle Italic</button>
<button @click="isDelete = !isDelete">Toggle Delete</button>
</div>
</template>
<script>
export default {
name: 'MyStyle',
data() {
return {
// 字体是否倾斜
isItalic: false,
// 是否应用删除效果
isDelete: false,
}
},
}
</script>
<style lang="less">
// 倾斜字体
.italic {
font-style: italic;
}
.delete {
text-decoration: line-through;
}
</style>
3 以对象语法绑定 HTML 的 class
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化:
<template>
<div>
<h3 class="thin" :class="classObj">MyStyle 组件</h3>
<button @click="classObj.italic = !classObj.italic">Toggle Italic</button>
<button @click="classObj.delete = !classObj.delete">Toggle Delete</button>
</div>
</template>
<script>
export default {
name: 'MyStyle',
data() {
return {
classObj: {
italic: false,
delete: false,
}
}
},
}
</script>
<style lang="less">
// 字体变细
.thin {
font-weight: 200;
}
// 倾斜字体
.italic {
font-style: italic;
}
.delete {
text-decoration: line-through;
}
</style>
4 以对象语法绑定内联的 style
:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<template>
<div>
<div :style="{ color: active, fontSize: fsize + 'px', 'background-color': bgcolor }">黑马程序员</div>
<button @click="fsize+=1">字号 +1</button>
<button @click="fsize-=1">字号 -1</button>
</div>
</template>
<script>
export default {
name: 'MyStyle',
data() {
return {
// 高亮时的文本颜色
active: 'red',
// 文字的大小
fsize: 30,
// 背景颜色
bgcolor: 'pink',
}
},
}
</script>
<style lang="less">
</style>