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 会自动侦测并添加相应的前缀。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
VSCode作为一个非常强大的代码编辑器,可以集成众多的插件和工具来优化开发效率,这篇文章主要给大家介绍了关于vscode中开发运行uniapp项目的详细步骤,需要的朋友可以参考下2023-07-07
本文主要介绍了vue基于el-table拓展之table-plus组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue实现百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本文主要介绍了VUE3之Non-Props属性的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了使用vue打包进行云服务器上传，本文给大家介绍的非常详细，对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了适合前端Vue开发童鞋的跨平台Weex的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
CLI是一个全局安装的npm包，提供了终端里的vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目2022-10-10
vue3+vite引入插件unplugin-auto-import的方法
这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了Vue项目中引入ESLint插件校验代码避免代码错误的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论