javascript - 为什么我的 Vue 组件没有绑定(bind)样式？

Question

const EventLevelBoard = {
  name: "EventLevel",
  data: {
    levelStyle: {
      display: "block"
    },
    levelStyleinner: [
      { display: "block" },
      { display: "block" },
      { display: "block" }
    ]
  },
  template: `<ul class="eventlevel" v-bind:style="{data.levelStyle}">
    <li v-for="(item, idx) in eventlist" v-key="idx"  v-bind:style="levelStyleinner[idx]"><strong class="name">{{item.name}}</strong>
    <strong class="size">{{item.size}}</strong></li>
  </ul>`,
  props: {
    eventlist: {
      type: Array
    }
  }
};

开发控制台错误:

data.levelStyle is undefined

data.levelStyleinneris undefined

为什么它找不到这些数据属性？

Answer 1

因为 data 不是组件实例上的可用属性，即使它显然是在 选项 中定义的。

您可以直接访问数据，就像在这里所做的那样:

v-bind:style="levelStyleinner[idx]"

如果您确实想通过实例访问它，可以通过 $data 来实现:

v-bind:style="$data.levelStyle"

绑定(bind)周围不应有大括号{ }。