Vue.js之Class 与 Style 绑定

简介: 数组语法:我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:wodata: { activeClass: 'active', err...

数组语法:

我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:

<div v-bind:class="[activeClass, errorClass]">wo</div>

这里写图片描述

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

这里写图片描述

渲染为:

这里写图片描述

相关文章
|
4月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
44 0
|
3月前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
393 61
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
26 2
JavaScript 类(class)
|
3月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
3月前
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
2月前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
33 0
|
4月前
|
JavaScript
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
这篇文章介绍了Vue中组件自定义事件的绑定和解绑方法,通过代码实例详细说明了在父子组件间如何传递数据,包括使用`$emit`触发事件、`$on`和`$off`绑定和解绑事件,以及在实际项目中的应用和调试技巧。
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
|
4月前
|
JavaScript
Vue——vue2监听元素style变化
Vue——vue2监听元素style变化
64 2
|
4月前
|
JavaScript 前端开发
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
这篇博客文章讲解了Vue中绑定样式和条件渲染的方法,包括类样式绑定的不同写法、`v-show`和`v-if`的条件渲染区别以及它们的使用场景和特点,并通过代码实例和测试效果来展示具体应用。
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
|
5月前
|
JavaScript
vue 中对style、disable 等样式进行条件判断
vue 中对style、disable 等样式进行条件判断
274 1