VueJS 中的数据绑定以构建 URL答案

【问题标题】：Data binding in VueJS to build a URLVueJS 中的数据绑定以构建 URL
【发布时间】：2018-12-02 01:48:40
【问题描述】：

第一次使用 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的代码

【问题讨论】：

标签： javascript html data-binding vue.js vuejs2

【解决方案1】：

您可以使用 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 为空时隐藏图像

【讨论】：

只是在输入 url 时显示图像出现问题。似乎将其设置为显示：无，如果它是相反的方式，即。 != jsfiddle.net/edkmsyru
看起来不需要空部分，只需执行v-show="myimage"
我的错，你是对的，它确实应该是！= null。可能需要空部分。例如，如果您输入“0”，我认为即使您输入了某些内容，它仍会评估为 false。

【解决方案2】：

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

【讨论】：