html - 在 vue.js 中添加超链接

Question

目前我正在抓取一些网站并将抓取数据的值(从 json 文件)返回到 vue.js 中的一个组件文件中的 HTML 表中当显示其中一个值时，我希望将此值放入作为 href="链接"。但是，由于我正在迭代所有数据，因此“链接”采用 {{ row[8] }} 的形式，vue 代码无法读取。我试过:

<a v-bind:href="{{ row[8] }}"> View </a>
<a href={{ row[8] }}> View </a>
<a href="row[8]">View</a>

但这些都不起作用。这是我的代码:

        <tbody>
              <tr v-for="row in sesami">
                <td>{{ row[0] }}</td>
                <td>{{ row[1] }}</td>
                <td>{{ row[2] }}</td>
                <td>{{ row[3] }}</td>
                <td>{{ row[4] }}</td>
                <td>{{ row[5] }}</td>
                <td>{{ row[6] }}</td>
                <td>{{ row[7] }}</td>
                <td>
                  <a href="row[8]">View</a>
                </td>
              </tr>
        </tbody>

目前，使用我使用的代码，超链接被映射到正确的单词“View”，但值或链接未插入其中，导致单击刷新页面时出现链接。请帮忙....

谢谢

Answer 1

使用 v-bind 语法时不需要字符串插值，因为预期参数的范围是 javascript 变量，例如行。观察:

<a v-bind:href="row[8]"> View </a>

这在句法上与:

<a :href="row[8]"> View </a>