javascript - Vue：使用链接设置初始数据字符串

Question

我有一个对象数组，就像boxData我的初始数据一样。我将如何将“这里”这个词变成一个我可以在引用时使用的超链接boxData？

data() {
    return {
        boxData: [
            {
                body: "This is the link here."
            },
            {
                body: "Normal text."
            }
        ]
    }
}

子组件

<div v-for="(box, index) in boxData" class="box">
    <div>
         {{ box.body }}
    </div>
</div>

标签： javascriptvue.jsobjectvuejs2v-for

Answer 1

理想情况下，带有链接的对象应具有类似url. 然后，假设所有链接都应该说“这是这里的链接”，你可以这样做：

<div v-for="(box, index) in boxData" class="box">
  <div>
    <template v-if="box.url">
      This is the link <a :href="box.url">here</a>.
    </template>
    <template v-else>
      {{ box.body }}
    </template>
  </div>
</div>

那么您在任何对象中都不需要“这是此处的链接”。