1. 程式人生 > 實用技巧 >vue.js select使用了v-for怎麼選擇預設option

vue.js select使用了v-for怎麼選擇預設option

在學習vue的時候會遇到一個坑,就是select中的option使用 v-for指令後,不知道如何選中的問題,以下介紹一種簡單的辦法。

工具/原料

  • vue.js

方法/步驟

  1. 1

    在v-for繫結的元素後面,新增:selected繫結option的selected屬性,它可以用true/false賦值

    select使用了v-for怎麼選擇預設option

  2. 2

    在list物件中指定一個屬性用於判斷是否為選中,本例中設定了第三項的selected為true.

    select使用了v-for怎麼選擇預設option

  3. 3

    從結果上,可以看到,列表中的第三行資料已經被選中了。

    select使用了v-for怎麼選擇預設option

    END

注意事項

  • 這個例子只是簡單解決問題,如果不喜歡在資料上新增屬性,可以設定一些外部方法來解決。