如何在vue js 2的href中放置变量? [英] How to put variable in a href on the vue js 2?

问题描述

当我运行这个:{{nextPage}}

结果

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

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

But when I put in a href like this :

<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}}"

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

我该如何解决错误?

推荐答案

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

v-bind expressions are directly executed as JavaScript. As such, they do not require interpolation.

你只是想要

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

参见模板语法 - 属性

Mustaches 不能在 HTML 属性中使用，而是使用 v-bind 指令

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

这篇关于如何在vue js 2的href中放置变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！