Vue中select下拉框的默認選中項的三種情況

本文轉載自查看原文 2021-10-15 17:24 3017 vue

關於select選項的寫法有三種情況 ①.寫在HTML中，②.寫在JS一個數組中，③.通過接口去獲取得到，我們直接上代碼：
第一種是option的值寫在HTML中

<div id="app">
     <select name="status" id="status" v-model="selected">
         <option value="">請選擇</option>
         <option value="1">未處理</option>
         <option value="2">處理中</option>
          <option value="3">處理完成</option>
     </select>
   </div>
<script>
   new Vue({
       el:'#app',
       data:{
              selected:''  
              //默認選中項的value值是什么  就給綁定的屬性什么值  這里默認選中項請選擇的value值是空  我們就給綁定的屬性 select 一個空值
       },
   })
    </script>

第二種是option 選項內容寫在JS中的，通過v-for來遍歷的：

<body>
    <div id="app">
     <select name="status" id="status" v-model="selected">
            <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
     </select>
   </div>
</body>

<script>
   new Vue({
       el:'#app',
       data:{
              statusArr:[
                  {
                      statusId:'0',
                      statusVal:'請選擇'
                  },
                  {
                      statusId:'1',
                      statusVal:'未處理'
                  },
                  {
                      statusId:'2',
                      statusVal:'處理中'
                  },
                  {
                      statusId:'3',
                      statusVal:'處理完成'
                  },
              ],
              selected:''
       },
       created(){
           // 在組件創建之后，把默認選中項的value值賦給綁定的屬性
           //如果沒有這句代碼，select中初始化會是空白的，默認選中就無法實現
         this.selected = this.statusArr[0].statusId;
       }
   })
    </script>

第三種是option 選項內容通過接口去獲取但是接口里沒有默認選中項怎么辦呢？看代碼

<body>
    <div id="app">
     <select name="status" id="status" v-model="selected">
         <!-- 由於從接口獲取的select的下拉值沒有‘請選擇’，所以我們要自己寫一個 -->
        <option value="">請選擇</option> 
        <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
     </select>
   </div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{
              statusArr:[], //用來接收從接口里獲取出來的select下拉框里的值
              selected:''
       },
       getSelectInfo(){
           var url = "../monitor_admin_front/device/status"; //接口地址
           axios.get(url)
           .then(response => {
              if(response.data.retCode == 0){
                 this.statusArr = response.data.data; //將獲取出來的數據賦給定義的數組 以便於去循環遍歷
              }
           }) 
       },
       created(){
         this.getSelectInfo();
       }
   })
    </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue elementui 實現select下拉框多選，並且有多個select下拉框，有一個下拉框選中某項，其他下拉框將禁用已選中的項 Element vue Select 下拉框默認如何在某些情況下禁止提交Select下拉框中的默認值或者第一個值(默認選中的就是第一個值啦……) element中select下拉框控件的選中事件 Java基礎101 給c:forEach的select下拉框中的值，設置默認值（后台傳值，前台默認選中） vue select下拉框綁定默認值下拉框默認選中第幾條去除select下拉框默認樣式 select下拉框之默認選項清空 select下拉框默認箭頭怎么去掉？