Vue 类与样式

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

一、绑定Class

    <div class="item" :class="{ active: activeIndex == index }" v-for="(item, index) in students" @click="itemClick(index)">学生编号：{{ item.id }}学生姓名：{{ item.name }}</div>

css

<style>
.item {background-color: rgb(180, 180, 180);padding: 20px;border-bottom: 1px solid red;transition: all ease 1s;
}.item.active {background-color: red;color: white;font-size: 20px;
}
</style>

js

<script>
export default {data() {return {students: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },{ id: 4, name: '赵六' },],activeIndex: -1}},methods: {itemClick(e) {console.info(e);this.activeIndex = e;}}
}
</script>

二、绑定内联样式，绑定style

<div class="item" :style="{ color: activeIndex == index?'red':'blue' }" v-for="(item, index) in students" @click="itemClick(index)">学生编号：{{ item.id }}学生姓名：{{ item.name }}</div> 

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

更多：

Vue 表单输入绑定，双向绑定

Vue生命周期_Vue生命周期钩子

Vue 概念、历史、发展和Vue简介