1. 程式人生 > >vue專案中關於錨點的(帶變數)使用方法(全域性使用)

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>
...