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

Question

我正在嘗試使用 v-for 在 VueJS 中循環，但由於某種原因，文本似乎沒有呈現。 不知道我做錯了什么？

這是我的樣品筆

 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>