如何将变量放在 vue js 2 的 href 中？答案

【问题标题】：How to put variable in a href on the vue js 2?如何将变量放在 vue js 2 的 href 中？
【发布时间】：2017-01-31 03:37:30
【问题描述】：

当我运行这个时：{{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="{{nextPage}}"

我该如何解决这个错误？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

你只是想要

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

见Template Syntax - Attributes

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

【讨论】：