Question

我第一次使用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

上的代码

Answer 1

您可以初始设置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>

Answer 2

您可以使用v-bind：href，然后在属性内使用普通的javascript，如下所示

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

请注意''属性中的其他v-bind

关于直到输入URL后才显示图像，您可以使用简单的v-show

<img class="insert" style="max-height:300px" v-show="myimage != null" v-bind:src="myimage">

当myimage为空时，这将隐藏图像

VueJS中的数据绑定以构建URL

2 个答案: