javascript - VueJS中的数据绑定(bind)以构建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>

这是JSFiddle处的代码

最佳答案

您可以初始设置myimage =''或null。然后，您可以使用v-if语句仅在myimage中存在某些值时显示图像和图像链接

<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>