Vue 绑定 style

旧城等待， 2022-05-24 13:53 323阅读 0赞

在Vue项目中，如果懒得写class属性，想直接将属性写在style上（我知道这不是一个好习惯）要怎么操作呢？

官方实例

  1. <!-- style 绑定 -->
  2. <div :style="{ fontSize: size + 'px' }"></div>
  • 1
  • 2

坑

的确，上面那样的写法确实能绑定，可是当属性为min-height

  1. <!-- style 绑定 -->
  2. <div :style="{ min-height: size + 'px' }"></div> // 编译不通过
  • 1
  • 2

会出现问题

这是因为中间有一个- 但是你可以这么操作

  1. <!-- style 绑定 -->
  2. <div :style="{ 'min-height': size + 'px' }"></div> // 通过
  4. <div id="verticalTab" >
  5.    <div v-for="(tab,index) in menu_list" class="tagsMenuSubModel"  @click="click(index)" :title="tab.menu_desc">
  6.       <div class="miniMenuTab">{
  7.   { tab.menu_name }}
  8.          <div style="padding-left:6px;">
  9.             <div align="center" :style="{'background-color':tab.menu_color}" class="shili"></div>
  10.          </div>
  11.       </div>
  12.    </div>
  13. </div>

发表评论

表情：
评论列表 （有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 绑定 style

    在Vue项目中，如果懒得写class属性，想直接将属性写在style上（我知道这不是一个好习惯）要怎么操作呢？ 官方实例 <!-- style 绑定 -->

    旧城等待，旧城等待，/ 0 赞/ 324 阅读

    相关 Vue class和style绑定

    关于vue中class和style的绑定，我们在本篇主要是为大家说明一下该怎么使用v-bind来进行处理。 首先我们看下class的几种绑定方式： 1.对象语法 通过v

    水深无声水深无声/ 0 赞/ 373 阅读