使用 vuejs 从 model 绑定超链接路径的正确方法是什么

Question

我遇到的问题是我想绑定 map，它是超链接的路径和文件名。 这似乎仅在 jsfiddle 中有效。 有人可以告诉我添加两者的正确方法吗？ 我正在使用地图+文件名。

 new Vue({ el: "#app", data: { map:'/mypath', filename:'/apple.jpg' }, methods: { toggle: function(todo){ todo.done =.todo.done } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p class="img-caption"><a v-bind:href="map+filename" target="_blank" rel="noopener">Click + </a><br /></p> </div>

Answer 1

有很多方法可以做到这一点，但我建议你使用计算属性：

  data: function() {
    return {
      map: "/mypath",
      filename: "/apple.jpg"
    };
  },
  computed: {
    filePath: function() {
      return this.map + this.filename;
    }
  },

然后您的标签将如下所示：

 <a v-bind:href="filePath" target="_blank" rel="noopener">Click + </a>