Question

我从Twitter API获得了大量推文。有些推文上附有图片，有些则没有。

目前，我使用此代码显示推文的图片：

android:windowSoftInputMode="adjustResize"

问题是这只有在推文实际上至少有一个图像时才有效。如果它没有图像，我会得到一个例外，因为<template lang="jade"> div Tweet text img(:src='tweet.entities.media[0].media_url', width='100%') </template> <script> import store from './store.js'; export default { name: 'tweet', data () { return { tweet : store.selectedTweet } } } </script>未定义。

如何解决这个问题，以便只有在推文的实体价值中有实际可用的图片时才会使用tweet.entities.media？

Answer 1

您可以使用v-if：

<template>
    <div class="Tweet text">
        <img :src="tweet.entities.media[0].media_url" width="100%" v-if="tweet.entities.media" />
    </div>
</template>

使用v-if将停止渲染img元素。

Answer 2

在字符串模板中，例如Handlebars，我们会编写一个这样的条件块：

{{#if tweet.entities.media}}
    img(:src='tweet.entities.media[0].media_url', width='100%')
{{/if}}

在Vue中，我们使用v-if指令来实现相同的目的：

<template>
    <div class="Tweet text">
        <img :src="tweet.entities.media[0].media_url" width="100%" v-if="tweet.entities.media" />
    </div>
</template>

在这里找到Documentation

如果图像网址存在，如何在Vue.js中显示<img/>？

2 个答案: