Question

我昨天开始学习vue，现在我在CLI3上闲逛。目前，我正在尝试将数据插入标记中的不同方法。

在这里，我基本上想创建一个“列表列表”。这是列表1：

<template>
<div>
<ul v-for="item in items">
  <li :text="item"></li>
</ul>
</div>

</template>

<script>
 export default{
   name:"list1",
   data() {
     return {
       items: {
         item1 : "itemA",
         item2 : "itemB",
         item3 : "itemC"
       }
     }
   }
 }
</script>

这是列表的列表：

<template>
  <div>
    <h1>All my stuff in a biiig list!</h1>
  <listOfLists />
</div>
</template>

<script>
import listOfLists from '@/components/listOfLists.vue'

export default {
  name: 'myComplexView.vue',
  components: {
    listOfLists
  }
}

这将插入到视图内部的myComplexView.vue中（也可以使用路由，尽管它不能完美运行，如您在屏幕快照中所见），您可以在这里看到：

<template>
  <div>
    <h1>All my stuff in a biiig list!</h1>
  <listOfLists />
</div>
</template>

<script>
import listOfLists from '@/components/listOfLists.vue'

export default {
  name: 'myComplexView.vue',
  components: {
    listOfLists
  }
}
</script>

这是我得到的结果： https://imgur.com/H8BaR2X 由于路由仍无法正常工作，因此我不得不手动将URL输入浏览器。幸运的是，该站点至少也以这种方式加载，因此我可以一点一点地解决这些问题^^

如您所见，v-for正确地迭代了数据。但是，数据未插入li元素的text属性中。我对这个原因一无所知。也许我没有绑定到正确的属性？据我了解，Vue使用自己的命名约定，基于标准的html和jquery。

Answer 1

您已经在模板中找到了它：

<li :text="item"></li>

这会将text属性绑定到该值，输出例如：

<li text="itemA"></li>

您应该能够在开发人员工具中看到这一点。在您发布的图片中，您没有展开相关元素，因此无法看到属性。

我假设您要设置的内容。为此，您可以使用v-text：

<li v-text="item"></li>

或更可能：

<li>{{ item }}</li>

这两个都会输出：

<li>itemA</li>

在不相关的注释上，我要补充一点，此行将创建多个列表：

<ul v-for="item in items">

尚不清楚这是否是您想要的。您将创建3个<ul>元素，每个元素都有一个<li>子元素。如果要创建单个<ul>，则将v-for移到<li>上。

为什么没有在此处插入对象属性的值？

1 个答案: