【Vue】-超鏈接功能(數組、字符串拼接、變量的使用)

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()",這時候,就可以點擊了。

發佈了146 篇原創文章 · 獲贊 20 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章