VueJS - 在 href 属性中使用 mustache 模板字符串 [英] VueJS - using mustache template strings inside href attribute

问题描述

在 vue 的上下文中，如何在 href 属性中添加小胡子?

How do you put in a mustache inside a href attribute in the context of vue?

这些是我发现的所有答案，我一直试图在我的代码中实现

These are all the answers I found that I've been trying to implement into my code

href 内的小胡子

如何将 Vue 数据中的值传递给href?

https://www.reddit.com/r/vuejs/评论/4ws0px/why_using_vbindhref_rather_than_a_href_string_a/

我现在的代码示例是:

...
<ul>
        <li v-for="menuItems in MenuItems" class="nav-item">
          <a
            class="nav-link"
            v-bind:href="{{ & menuItems.url}}"
            aria-label="blah"
            >{{ menuItems.text }}</a
          >
        </li>
      </ul>
...
export default {
  name: 'Nav',
  data: {
    menuItems: [
      {text: 'Item 1', url: '/item-1'},
      {text: 'Item 2', url: '/item-2'},
      {text: 'Item 3', url: '/item-3'},
      {text: 'Item 4', url: '/item-4'}
    ]
  }
}
...

我试过了:

1.

      <a
        class="nav-link"
        v-bind:href="{{ & menuItems.url}}"
        aria-label="blah"
        >{{ menuItems.text }}</a
      >

  <a
    class="nav-link"
    v-bind:href="menuItems.url"
    aria-label="blah"
    >{{ menuItems.text }}</a
  >

  <a
    class="nav-link"
    v-bind:href="/menuItems.url/"
    aria-label="blah"
    >{{ menuItems.text }}</a
  >

我要么得到:

编译模板时出错:

无效表达式:意外标记 { in

invalid expression: Unexpected token { in

{{ & menuItems.url}}

原始表达式:v-bind:href="{{ & menuItems.url}}"

Raw expression: v-bind:href="{{ & menuItems.url}}"

或者一个完全空的

我做错了什么?这是如何工作的?

What am I doing wrong? How does this work?

推荐答案

假设您使用的是当前 VueJS 版本，则您链接的所有链接都与这种情况无关.VueJS 1 使用了在 html 属性中使用双花括号，但是在 VueJS 2 中它被替换为所谓的 v-bind.V-bind 可以通过以下两种功能等效的方式在属性中使用:

None of the links that you linked are relevant to this situation assuming you are using the current VueJS version. Using double curly braces inside html attributes was used VueJS 1, however in VueJS 2 it was replaced with what is called v-bind. V-bind can be used in attributes with the two following ways which are functionally equivalent:

<a v-bind:href="url"></a>

和

<a :href="url"></a>

带有双花括号的 mustache 语法在模板中仍然有效，但在属性中无效.

The moustache syntax with double curly braces works still inside the template, however not in attributes.

这篇关于VueJS - 在 href 属性中使用 mustache 模板字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！