Javascript VueJS中的数据绑定以生成URL

我第一次尝试VueJS非常棒。只是数据绑定有几个问题

我需要客户输入图像，因此在输入字段中输入url之前，不应显示任何图像。目前，它在等待客户的图像时显示一个损坏的图像。 我需要使用静态URL amazon.com构建一个URL，并将绑定的图像附加到URL。我尝试过v-bind:href，但没有任何乐趣

<div class="main" id="vue-instance">
<!-- this will be the DOM element we will mount our VueJs instance to -->
Enter an image url:
<input type="text" v-model="myimage">

<img class="insert" style="max-height:300px" v-bind:src="myimage">
<a href="https://amazon.com" target="_blank">Link to the image</a>
</div>

---

下面是位于

的代码，您可以在属性中使用v-bind:href，然后使用普通javascript，如下所示

<a v-bind:href="'https://amazon.com/' + myimage" target="_blank">Link to the image</a>

---

当myimage为null时，这将隐藏图像。您可以先设置myimage=或null。然后，您可以使用v-if语句仅在myimage中有值时显示image和image链接

<div v-if="myimage">
    <img class="insert" style="max-height:300px" v-bind:src="myimage">
    <a v-bind:href="'https://amazon.com/' + myimage" target="_blank">Link to the image</a>
</div>

---

只是在输入url时让图像显示有问题。似乎将其设置为显示：无，应该是相反的ie！=看起来不需要空部分，只需执行v-show=myimageMy错误，您是正确的，它确实应该是！=无效的可能需要空部分。例如，如果您键入“0”，我认为即使您键入了某些内容，它仍将计算为false。

<div v-if="myimage">
    <img class="insert" style="max-height:300px" v-bind:src="myimage">
    <a v-bind:href="'https://amazon.com/' + myimage" target="_blank">Link to the image</a>
</div>