如何将变量放在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>

存在这样的错误：

  

模板语法错误 - 表达式无效:: href =＆＃34; {{nextPage}}＆＃34;

如何解决错误？

Answer 1

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

你只想要

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

请参阅Template Syntax - Attributes

  

不能在HTML属性中使用Mustass，而是使用v-bind directive