vue绑定样式不起作用

Posted 2023-05-02

参考技术A 在项目开发时碰到了一个问题，就是在v-for结构里使用样式绑定，绑定的值取决于在created或者mounted里面更新的数据的值，但完全不起作用，而自己仿照结构写的测试又可以，确认了不是样式方面的问题。
测试案例如下：

后面一检查发现update根本没被触发，即使我使用了this.$set()和数组的splice方法。

最终解决方案：使用强制更新this.$forceUpdate() 成功解决，看网上说出现这种情况的原因，是数据的层级太深。

Vue JS CSS 样式绑定

【中文标题】Vue JS CSS 样式绑定

【英文标题】：Vue JS CSS style binding

【发布时间】：2020-10-14 21:09:04

【问题描述】：

我正在尝试将 CSS 样式绑定到 vuejs 标签。我似乎无法让它工作。 下面是我正在尝试的代码。谁能帮我解决这个问题？我无法让造型工作。我正在尝试这个以及基于条件的绑定。两者似乎都不起作用。谁能帮我这个？我已经尝试了在***上可以找到的所有方法，但它们似乎都不适合我。如果我做错了什么，谁能帮助我？

  <b-table
      class="PatientTable"
      borderless
      hover
      v-on:row-clicked="redirectToPatientView"
      :items="users"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      id="tableData"
    >
      <template v-for="key1 in fields" v-slot:[`cell($key1)`]=" value " id="tableData"  >
        
       <b class="patientData" id="tableData" v-bind:key="key1" v-bind:style="'font-size:200px;'"> value </b>
      </template>

【参考方案1】：

改用:class 绑定？

<component :class="'your-classname' : condition">

因为内联样式并不是真正可取的。 https://vuejs.org/v2/guide/class-and-style.html

【参考方案2】：

绑定样式时，传入一个对象而不是对象的字符串。

<!-- Instead of: -->
<b :style="'font-size:200px;'"> value </b>

<!-- Do: -->
<b :style=" 'font-size' : '200px' "> value </b>

请注意，在第二行中，对象直接放在双引号中，没有自己的单引号集。这些双引号的内容是直接的 JavaScript，因此您不必转义其中的对象。你实际上想要做的是沿着这些路线：

<b :style="styleBinding"> value </b>

<script>
export default 
  data: function() 
    return 
      styleBinding: 
        'font-size': '200px',
        'margin-top': '5em',
        'other-css-property': 'value'
      
    
  

</script>

只是这样，因为你只使用一个属性，在模板中做内联会更简洁一些。