Question

我是Vuejs的新手。这是我需要做的。

<div v-for="r in records">
    <div v-if="r.something">
        <div id="x">
            {{ r. something}}
            more of r here.
        </div>
    </div>

    <div v-else id="x">
        same div as in the block above.
    </div>
</div>

我想做的是不要用id x两次定义div，因为它很大。

Answer 1

使您的“ div”组件成为一个组件，并在两个地方都引用它。

有很多定义组件的方法。此示例仅显示一个。如果使用的是WebPack，请使用单个文件组件。然后，您可以将脚本，html和css全部包含在一个预先编译的文件中。这是管理“巨大” div的最佳方法。然后，您可以继续重构并将其分解为更多组件。

const myComponent = {
  template: "<div :id='id'>HELLO, my id is {{id}}. r.foo is {{r.foo}} </div>",
  props: {
    id: String
  },
  data() {
    return {
      r: {
        foo: 'bar'
      }
    }
  }
}

<div v-for="r in records">
  <div v-if="r.something">
    <my-component id='x' />
  </div>

  <div v-else id="x">
    <my-component id='x' />
  </div>
</div>

vuejs在不同元素内呈现模板的一部分，而无需重复

1 个答案: