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-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    这篇文章主要介绍了Element-UI中关于table表格的那些骚操作(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue 虚拟dom的patch源码分析

    vue 虚拟dom的patch源码分析

    这篇文章主要介绍了vue 虚拟dom的patch源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue中对iframe实现keep alive无刷新的方法

    Vue中对iframe实现keep alive无刷新的方法

    这篇文章主要介绍了Vue中对iframe实现keep alive无刷新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue.js 2.0实现简单分页效果

    vue.js 2.0实现简单分页效果

    这篇文章主要为大家详细介绍了vue.js 2.0实现简单分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vuejs监听vuex中值的变化的方法示例

    Vuejs监听vuex中值的变化的方法示例

    这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue中设置、获取、删除cookie的方法

    vue中设置、获取、删除cookie的方法

    今天小编就为大家分享一篇vue中设置、获取、删除cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vuex进阶知识点巩固

    vuex进阶知识点巩固

    本片文章是小编在网上整理的关于VUEX进阶的相关知识点内容,对此有兴趣的朋友可以跟着学习参考下。
    2018-05-05
  • Vue.js开发环境快速搭建教程

    Vue.js开发环境快速搭建教程

    这篇文章主要为大家详细介绍了Vue.js开发环境快速搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue更改数组中的值实例代码详解

    vue更改数组中的值实例代码详解

    这篇文章主要介绍了vue更改数组中的值,本文通过两个例子,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论