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开发设计分支切换与cleanup实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下2023-04-04
vue+element-ui+sortable.js实现表格拖拽功能
这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue下的@change事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
Vue.js中的插槽（slot）是一种机制，允许你在组件的模板中预留一些位置，以便父组件可以将任意内容插入到这些位置，这使得组件更加灵活和可复用，本文主要介绍了vue中slot插槽的参数汇总及使用方案,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了vue复合组件实现注册表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
在现代Web开发中,Vue.js成为前端开发者构建单页应用的热门框架,Nginx以其高性能和稳定性,成为部署Vue项目的理想选择,这篇文章主要介绍了Nginx部署前端Vue项目的步骤、常见问题与解决方案,需要的朋友可以参考下2024-09-09
浅谈vue实现数据监听的函数 Object.defineProperty
本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-08-08
vue-cli history模式实现tomcat部署报404的解决方式
这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论