1.簡介
現在,項目有一個需求,就是要實現超鏈接的功能,看下圖:
2.實現:
(1)用<van-popup>和<van-field> 去實現這個彈出框。
(2)用v-model="value1"去接受用戶輸入的數值,這時候就相當於一個變量的形式。
當然這個變量要在data()中聲明。
(3)當點擊確定的時候,把a標籤放到div框中。
這時候,一定要給連接一個點擊的事件,它才能跳轉過去。
3.做完了,我們會發現,當我們插入第二個連接的時候,它會把第一個覆蓋了。
解決思路:利用數組,將第一個存入到數組當中。
(3.1)聲明數組、變量。
(3.2)用變量接受a標籤(注意)
注意:由於數組中不能接受a標籤,所以我們採用字符拼接的形式,這樣形成了字符串,然後通過字符串賦值給標籤,再存入數組中。
(3.3)展示數組
v-html表示 可以包含標籤的內容,可以轉化給Html頁面的形式展示,利用v-for進行循環遍歷。
這樣就解決了,第二個超鏈接把第一個超鏈接覆蓋的問題。
(3.4)這時候會發現遍歷到div可編輯中的不能點擊,跳轉,這時候我們可以增加一個v-on:click="link()",這時候,就可以點擊了。