多行显示字符串

Question

我想在多行上显示我的字符串。 我已经尝试过类似replaceAll(",", "\n")这是我的代码：

<template>
    <v-form>
        <v-container>
          <v-card
              class="mt-15 pa-4  mx-auto"
              max-width="1000"
              multi-line>
            {{consoleOutput.toString().replaceAll(",", "\n")}}
          </v-card>
        </v-container>
    </v-form>
</template>

<script>
    export default {
        data: () => ({
            consoleOutput: ["This", "should", "be", "on a ", "new Line "],
        })
    }
</script>

我得到这个 output This should be on a new Line 。 我的目标是在不同的行上打印每个字符串并在其前面添加一个索引（等于控制台），例如：

1. This
2. should
3. be 
4. on a 
5. new Line

Answer 1

尝试使用ol元素和v-for来渲染每个li

 <v-card
    class="mt-15 pa-4  mx-auto"
    max-width="1000"
    multi-line
>
    <ol>
        <li v-for="item in consoleOutput" :key="item">{{item}}</li>
    </ol>
</v-card>

Answer 2

我认为你可以这样做。

 <v-container>
  <v-card
      class="mt-15 pa-4  mx-auto"
      max-width="1000"
      multi-line>
      <div v-for="item in consoleOutput.toString().split(',')" :key="item">        
        {{item}}
      </div>
  </v-card>
</v-container>

请确认此 URL。 https://stackblitz.com/edit/vue-gmadqd?file=src%2Fcomponents%2FHelloWorld.vue