vue3 分页如何渲染属性 aria-current="page"?

2年前 (2022) 程序员胖胖胖虎阿
441 0 0

分页模块的时候,当时当前页面,如果是当前页,需要加一个属性 aria-current="page"
vue3代码:aria-current="{'page':page === n}" 结果没有渲染出来,IDE也标黄。

vue3 分页如何渲染属性 aria-current=

代码

<template>
  <nav aria-label="...">
    <ul class="pagination">
      <li class="page-item" :class="{'disabled':page === 1}">
        <span class="page-link">Previous</span>
      </li>
      <li v-for="n in total_page" class="page-item" :class="{'active': page === n }" :aria-current="page === n ?'page':false">
        <a v-if="page === n" class="page-link" href="#" @click="submit(n)">{{ n }}</a>
        <span v-else class="page-link" @click="submit(n)">{{ n }}</span>
      </li>
      <li class="page-item" :class="{'disabled': page === total_page}">
        <a class="page-link" href="#" @click="submit(total_page)">Next</a>
      </li>
    </ul>
  </nav>
</template>

模板

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
版权声明:程序员胖胖胖虎阿 发表于 2022年10月25日 下午2:16。
转载请注明:vue3 分页如何渲染属性 aria-current="page"? | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...