javascript - 如何在 vue js 2 上将变量放入 href 中？

Question

当我运行此命令时:{{nextPage}}

结果

http://chelseashop.dev/search-result?page=2

但是当我输入这样的 href 时:

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            ...
            <li>
                <a :href="{{nextPage}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        ...
    }
</script>

存在这样的错误:

template syntax error - invalid expression: :href="{{nextPage}}"

如何解决该错误？

Answer 1

v-bind 表达式直接作为 JavaScript 执行。因此，它们不需要插值。

你只是想要

<a :href="nextPage" aria-label="Next">

参见Template Syntax - Attributes

Mustaches cannot be used inside HTML attributes, instead use a v-bind directive