vue 实现根据data中的属性值来设置不同的样式

 更新时间:2020年08月04日 09:26:06   作者:小企鹅_  
这篇文章主要介绍了vue 实现根据data中的属性值来设置不同的样式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

style动态赋值

margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式

补充知识:vue 条件判断绑定内联样式

当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象

:style="!areaCode || !phoneNumber || !receivedCode || !verification
? '{backgruond:#ccc}' : $store.state.store.config.background"

以上这篇vue 实现根据data中的属性值来设置不同的样式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue和Bootstrap的整合思路详解

    Vue和Bootstrap的整合思路详解

    这篇文章主要介绍了Vue和Bootstrap的整合思路详解,需要的朋友可以参考下
    2017-06-06
  • VUE 配置vue-devtools调试工具及安装方法

    VUE 配置vue-devtools调试工具及安装方法

    vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。这篇文章主要介绍了VUE 配置vue-devtools调试工具及安装步骤 ,需要的朋友可以参考下
    2018-09-09
  • vue cli3 配置proxy代理无效的解决

    vue cli3 配置proxy代理无效的解决

    今天小编就为大家分享一篇vue cli3 配置proxy代理无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue 详解mixins混入用法大全

    Vue 详解mixins混入用法大全

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2021-08-08
  • Vue如何实现el-table多选样式变为单选效果

    Vue如何实现el-table多选样式变为单选效果

    这篇文章主要介绍了Vue如何实现el-table多选样式变为单选效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • webStorm debug vue项目的两种方案图文详解

    webStorm debug vue项目的两种方案图文详解

    WebStorm作为一款功能强大的IDE,提供了丰富的调试功能和技巧,可以帮助你更高效地开发和调试Vue应用,这篇文章主要给大家介绍了关于webStorm debug vue项目的两种方案,需要的朋友可以参考下
    2024-07-07
  • vuedraggable+element ui实现页面控件拖拽排序效果

    vuedraggable+element ui实现页面控件拖拽排序效果

    这篇文章主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue中filters 传入两个参数 / 使用两个filters的实现方法

    vue中filters 传入两个参数 / 使用两个filters的实现方法

    这篇文章主要介绍了vue中filters 传入两个参数 / 使用两个filters的实现方法,文中给大家提到了Vue 中的 filter 带多参的使用方法,需要的朋友可以参考下
    2019-07-07
  • 解决在Vue中使用axios用form表单出现的问题

    解决在Vue中使用axios用form表单出现的问题

    今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue如何实现Toast轻提示

    vue如何实现Toast轻提示

    这篇文章主要介绍了vue如何实现Toast轻提示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论