Vue中select下拉框搭配v-model -- 转载

最新推荐文章于 2024-06-06 10:38:36 发布

后端小哥_哈哈

最新推荐文章于 2024-06-06 10:38:36 发布

阅读量1.3w

点赞数 4

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/weixin_41056945/article/details/92382436

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue中select下拉框搭配v-model -- 转载

在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值。

select下拉框在界面的展示，我们都希望看到框中有一个值而不是空白，比如显示 “请选择” 或者 “全部” 的默认值。

在这里插入图片描述
关于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>

转载链接地址：
https://blog.csdn.net/weixin_41056945/article/details/92382436

后端小哥_哈哈

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Vue中select下拉框搭配v-model -- 转载

Vue中select下拉框搭配v-model -- 转载第一种是option的值写在HTML中第二种是option 选项内容写在JS中的，通过v-for来遍历的：第三种是option 选项内容通过接口去获取但是接口里没有默认选中项怎么办呢？看代码在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值。select下拉框在界面的展示，我们都希望看到框中有一个值而不是空白，比如显示 “请选择” 或者 “全部” 的默认值。关于select选项的写
复制链接

扫一扫