Question

我正在尝试使用v-for在VueJS中循环，但由于某些原因，文本似乎无法呈现。不知道我在做什么错吗？

这是我的示例pen

new Vue({
  el: "#app",
  data() {
    return {
      inputValue: "",
      myArray: []
    };
  },
  methods: {
    createArray() {
      this.myArray.push(this.inputValue);
      console.log(this.myArray);
    },
    clear() {
      this.inputValue = "";
      this.myArray = [];
      console.log(this.myArray);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs6>
        <v-text-field v-model="inputValue">
        </v-text-field>
        <v-btn :disabled="inputValue === ''" @click="createArray">Click Me</v-btn>
        <v-btn @click="clear">Clear</v-btn>
        <div v-if="myArray.length > 0">
          <div v-for="(item,i) in myArray"></div>
          <li>{{item}}</li>
        </div>
      </v-flex>
    </v-layout>
  </v-app>
</div>

任何帮助将不胜感激。谢谢

Answer 1

您将</div>放在错误的位置。

这里应该是：

<div v-for="(item,i) in myArray">
  <li>{{item}}</li>
</div>

如何在VueJS中使用v-for循环？

1 个答案: