我想稍后添加图像，但我使用的是v-for，我不知道如何在不中断循环的情况下添加图像。

<template>
  <v-card>
    <p v-for="item in texts" :key="item.id" class="bm-1">{{ item.text }}</p>
  </v-card>
</template>

<script lang="ts">
import { Vue } from "nuxt-property-decorator";

export default class QuickStart extends Vue {
  texts: any[] = [
    {
      id: 0,
      text: "Text A",
    },
    {
      id: 1,
      text: "Text B",
    },
    {
      id: 2,
      text: "Text C",
    },
  ];
}
</script>

字符串
例如，在上面的代码中，我想在id 1和id 2之间添加一个图像，但如何添加呢？（我也想用v-for。如果不是这样的话，我知道我可以只添加数字或p标记。

我尝试放置一个id和text的图像，但正如预期的那样，它不起作用。

溶液

您可以使用多种方式建立它。有一点是肯定的：阵列必须是结构良好。例如，一种可能的方法是，数组的某些元素包含文本，而其他元素包含图像，然后按顺序显示它们。这样，第一个元素是文本，第二个元素是图像，第三个元素可以是另一种文本变体。

const { createApp, reactive } = Vue

const app = createApp({
  setup() {
    const list = reactive([{
      id: 1,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }, {
      id: 2,
      imageSrc: "https://picsum.photos/200/300"
    }, {
      id: 3,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }])

    return { list }
  }
}).mount('#app')

个字符

解决方案2

或者，您可以决定将图像与其所属的每个文本关联。例如，我选择有2个文本，第二个与一个图像关联：

const { createApp, reactive } = Vue

const app = createApp({
  setup() {
    const list = reactive([{
      id: 1,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }, {
      id: 2,
      imageSrc: "https://picsum.photos/200/300",
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }])

    return { list }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>

<div id="app">
  <div v-for="item of list">
    <div v-if="item.imageSrc">
      <img :src="item.imageSrc" />
    </div>
    <div v-if="item.text">{{ item.text }}</div>
  </div>
</div>

的字符串

解决方案3

如果您想要在第一个和第二个元素之间，以及在第二个和第三个元素之间等一致地放置图像，也可以在HTML模板中声明它们。您只需要使用一个v-if条件来指定它们何时出现。

const { createApp, reactive } = Vue

const app = createApp({
  setup() {
    const list = reactive([{
      id: 1,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }, {
      id: 2,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }, {
      id: 3,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }, {
      id: 4,
      text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!`
    }])

    return { list }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>

<div id="app">
  <div v-for="item of list">
    <!-- Pre-Declared Image between ID-1 and ID-2 -->
    <img v-if="item.id === 2" src="https://picsum.photos/200/300" alt="between 1 and 2" />
    
    <!-- Pre-Declared Image between ID-2 and ID-3 -->
    <img v-if="item.id === 3" src="https://picsum.photos/300/300" alt="between 2 and 3" />
    
    <!-- Pre-Declared Image between ID-3 and ID-4 -->
    <img v-if="item.id === 4" src="https://picsum.photos/500/300" alt="between 3 and 4" />

    <!-- Text -->
    <div v-if="item.text">{{ item.text }}</div>
  </div>
</div>

的字符串

摘要

总而言之，你所要求的可以通过许多不同的方式来实现。图像应该始终在数组中有自己的位置，可以作为单独的项，也可以与另一项关联。

在vuetify中添加图像v-for

1条答案

溶液

解决方案2

解决方案3

摘要

相关问题

热门标签

最新问答