1. 首页
  2. 问题列表
  3. Vue JS CSS样式绑定
提问者：小点点

Vue JS CSS样式绑定


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

共2个答案

匿名用户

是否改用:class绑定？

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

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

匿名用户

这里有几种方法:

办法1

 <b-table :class="{'class-name' : condition}">

办法2

使用计算属性基于某些条件返回类

    <b-table :class="this.yourClass">

 computed: {
   yourClass() { 
     return this.someCondition ? 'class-name1' : 'class-name2'
 }

如果this.someCondition===true，则属性将返回class-name1，否则将返回class-name2

对于你的风格，你可以做:

 :style="yourStyle"

computed: {
   yourStyle() { 
     return 'background : red' // just as an example
    }
 }

相关问题