时间戳

首页 > 解决方案 > 如何在 VueJS 中使用 v-for 循环？

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

问题描述

我正在尝试使用 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>

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

标签： javascriptvue.js

解决方案

你放</div>错地方了。

这里应该是：

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

推荐阅读