[JavaScript知识库]vue中动态绑定属性

动态绑定属性

1. style

    <div

      class="box"

      style="width:200px;height:200px"

      :style="flag ? 'background-color:green' : 'background-color:blue'"

    ></div>

    <button @click="flag = !flag">变色</button>

2. class

    <div

      class="box"

      style="width:200px;height:200px"

      :class="{ redBgc: flag }"

    ></div>

  .redBgc { background-color: red; }

3 style搭配computed计算属性

 <a-table :dataSource="tableList" :columns="columns" class="tableMom">
      <template slot="titleName">
        <span>姓名</span>

        <a-popover
          v-model="isShow"
          title="Title"
          trigger="click"
          placement="bottom"
        >
          <!-- 弹框内容，这里设置为与表格一样高，超出滚动处理 -->
          <template slot="content">
            <div
              class="box"
              style="overflow-y:scroll"
              :style="{ height: boxHeight }"
            >
              <p v-for="(item, i) in dataList" :key="i">{{ item.name }}</p>
            </div>
          </template>

          <a-icon type="caret-down" theme="filled" />
        </a-popover>

      </template>
    </a-table>

  computed: {
    boxHeight() {
      return vm.tableList.length * 50 - 32 + 'px'
    }
  }

点击表格向下icon,弹出弹框，弹框的高度为正好与表格底部对齐，50为一行的行高
主要计算宽、高类与数字相关的属性