vuejs绑定class和style样式
更新时间：2017年04月11日 09:45:23 作者：webCoder
本文主要介绍了vue.js实现绑定class和style样式的方法。具有很好的参考价值。下面跟着小编一起来看下吧
绑定Html Class
我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: { isA: true, isB: false}
渲染结果：
<div class="static class-a"></div>
你也可以直接绑定数据里的一个对象,结果与上面的一致：
<div v-bind:class="classObject"></div>
data: {
classObject: {
'class-a': true,
'class-b': false
}
}
绑定内联样式
v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到对象上(让模板更清晰)
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
备注：当 v-bind:style使用需要厂商前缀的 CSS 属性时如 transform，Vue.js 会自动侦测并添加相应的前缀。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue学习笔记进阶篇之单元素过度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
Vue3-新特性defineOptions和defineModel示例详解
在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了在vue中实现echarts随窗体变化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
@change 是 Vue.js 中用于监听表单元素值变化的事件处理器,很多组件有@change事件,那到底如何获取到当前的参数呢？本文给大家详细讲解,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了多页vue应用的单页面打包方法(内含打包模式的应用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
在Web开发中,获取DOM元素的宽度、高度以及滚动位移是常见的需求,这篇文章主要给大家介绍了关于vue获取组件中元素宽度常用的方法,需要的朋友可以参考下2024-08-08
本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
这篇文章主要为大家详细介绍了vue自定义全局组件实现弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论