vue2点击后添加css样式

### 实现点击事件后动态绑定 Class 在 Vue 2 中，可以通过 `v-on` 绑定点击事件，并利用 `v-bind:class` 或者缩写 `:class` 来动态切换元素的样式。下面展示如何实现当用户点击某个按钮或其他 HTML 元素时，向该元素添加特定的 CSS 类。 #### 方法一：使用三元运算符条件渲染 Class 如果目标是在单次点击之后永久性地应用新的样式，则可以采用布尔标志位配合三元表达式的方式： ```html <div id="app"> <!-- 使用三元运算符 --> <button @click="isActive = !isActive" :class="[ isActive ? 'active-class' : '' ]">Toggle Style</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> new Vue({ el: '#app', data() { return { isActive: false }; } }); </script> <style scoped> .active-class { background-color: green; } </style> ``` 此代码片段展示了如何创建一个简单的按钮，在每次点击时切换其背景颜色至绿色[^1]。 #### 方法二：数组语法组合多个 Classes 对于更复杂的场景下可能需要同时管理多组不同的 classes，这时就可以考虑使用数组形式来指定 class 列表： ```html <div id="app"> <!-- 数组语法 --> <span :class="[ baseClass, {'highlight': isHighlighted}, specificClasses[index] ]">{{ message }}</span> <button @click="toggleHighlight()">Toggle Highlight</button> </div> <script> export default { name: 'ExampleComponent', props: ['index'], data () { return { message: 'Hello world!', isHighlighted: true, baseClass: 'base-style', specificClasses: [ '', 'special-case' ] } }, methods:{ toggleHighlight(){ this.isHighlighted=!this.isHighlighted; } } }; </script> <!-- Add some styles (optional) --> <style scoped> .base-style{ font-size: large; } .highlight { color:red; } .special-case { border:solid black 1px; } </style> ``` 上述例子中不仅实现了点击按钮改变 span 的高亮状态的功能，还示范了怎样结合静态和动态两种类型的 class 进行设置[^3]。 #### 方法三：对象语法控制 Class 存在与否 另一种常见的做法是以键值对的形式定义哪些 class 应该被激活，这特别适合处理大量互斥的选择情况： ```html <div id="example-4"> <p :class="{ active: isActive, 'text-danger': hasError }"> Class Binding with Object Syntax. </p> <input type="checkbox" v-model="isActive"/> Active <br/> <input type="checkbox" v-model="hasError"/> Error State </div> <script> var vm = new Vue({ el: '#example-4', data: function () { return { isActive: true, hasError: false } } }) </script> <style> .text-danger { color: red; } .active { font-weight: bold; } </style> ``` 这里提供了一个交互界面让用户勾选复选框来自由开启关闭不同效果的状态[^4]。