Question

我正在尝试将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>

Answer 1

改为使用:class绑定？

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

因为实际上并不建议使用内联样式。 https://vuejs.org/v2/guide/class-and-style.html

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

仅此而已，因为您仅使用单个属性，所以在模板中内联进行操作会更清洁。

Vue JS CSS样式绑定

2 个答案: