Vue JS CSS 样式绑定答案

【问题标题】：Vue JS CSS style bindingVue JS CSS 样式绑定
【发布时间】：2020-10-14 21:09:04
【问题描述】：

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

  <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>

【问题讨论】：

标签： css vue.js vue-component vuex

【解决方案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>

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

【讨论】：