前言
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
官网地址:https://cn.vuejs.org/v2/guide/class-and-style.html
一、 Class官方语法及案例(html class)
我们可以传给 v-bind:class 一个对象,以动态地切换 class 语法:
官方语法:
单个:
<div v-bind:class="{ active: isActive }"></div>
多个:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
解析:
单个:
<div v-bind:class="{ clss对象: boolean类型}"></div>
多个:
<div
class="static"
v-bind:class="{ clss对象: boolean类型, clss对象: boolean类型 }">
</div>
案例
需求:
当我点击目录时字体颜色也会跟着改变
index.vue
<li @click="directoryIdentifierClick('device')" v-if="isShowDevice">
<router-link to="/home/device">
<div>
<span class="nav-bottom-span nav-img"><img :src='deviceImgUrl'></span>
<span class="nav-bottom-span" v-bind:class="{clickDirectory: this.fontColor === 'device'}">设备</span>
</div>
</router-link>
</li>
<li @click="directoryIdentifierClick('user')" v-if="isShowUser">
<router-link to="/home/user">
<div>
<span class="nav-bottom-span nav-img"><img :src='userImgUrl'></span>
<span class="nav-bottom-span" v-bind:class="{clickDirectory: this.fontColor === 'user'}">我的</span>
</div>
</router-link>
</li>
directoryIdentifierClick 点击事件
v-bind:class="{clickDirectory: this.fontColor === ‘device’}" 当 this.fontColor 等于 device 就显示样式,user也一样
class
.clickDirectory {
// 字体变为橙色
color: #fe7d2d;
}
data
data () {
return {
fontColor: 'user'
}
}
methods
methods: {
// 目录点击事件
directoryIdentifierClick (directory) {
// 点击谁,我就让 fontColor 等于它
this.fontColor = directory
}
}
beforeUpdate
// 钩子事件(触发机制:数据修改时)
beforeUpdate: function () {}
渲染结果
二、 style官方语法及案例(绑定内联样式)
官方语法
v-bind:style 的对象语法类似 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
解析
<div v-bind:style="{ 属性: 值, 属性: 值}"></div>
<div v-bind:style="{ 类似一个map(k,value) }"></div>
案例
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello Vue</div>
data: {
activeColor: 'red',
fontSize: 30
}
总结
大概简述了用法,官网的各种用法更加详细,若不懂的可以去官网查看
官网地址:https://cn.vuejs.org/v2/guide/class-and-style.html