vue项目中关于锚点的(带变量)使用方法(全局使用)
问题
在普通html中,锚点的使用方法是:
<a href="#123">点击就定位到123的锚点</a>
...
<div id="123">这里是锚点的位置</div>
但在vue项目中,各个页面被划分成了很多组件,经常是在 A 组件中循环渲染多个 a标签,点击跳转到 B 组件的锚点位置
解决
在 A 组件中,
<a v-for="item in 20" :href="'#' + item">链接</a>
这里使用 v-bind:href ,才能使用变量 item,简写就是 :href
渲染结果就是:
<a href="#1">链接</a>
<a href="#2">链接</a>
...
在 B 组件中,
<div v-for="item in 20" :id="item">锚点</div>
这里使用 v-bind:id 才可以使用变量 item
渲染结果就是
<div id="1">锚点</div>
<div id="2">锚点</div>
...