javascript - VueJS 中的数据绑定(bind)以构建 URL

Question

我第一次使用 VueJS，非常棒。刚刚遇到了一些数据绑定(bind)问题。

• 我需要客户输入图像，因此在输入字段中输入网址之前不应显示任何图像。目前，在等待客户提供图像时，它会显示损坏的图像。

• 我需要使用静态 URL (amazon.com) 构建一个 URL，并将绑定(bind)图像附加到该 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>