zoukankan      html  css  js  c++  java
  • vue的select 下拉框某一项设置为不可选

    select下拉框中某一项不可选置灰

    一,

      html

    <div class="sale">
          <select @change="GetCountyData()">
               <option>请选择</option>
               <option v-for="(item,index) in data" :disabled="item.is_true==1?true:false" :class="{statusbtn:item.is_true==1}">{{item.is_true}}</option>
          </select>
    </div>

    二,

     script

    export default {
            name: 'app',
            data() {
                return {

                   "data": [{
                      "is_true": "0",
                      "region_id": "12",
                      "region_name": "南昌市",
                    },
                   {
                     "is_true": "1",
                     "region_id": "13",
                     "region_name": "景德镇市",
                   },
                   {
                     "is_true": "0",
                     "region_id": "14",
                     "region_name": "萍乡市",
                   },
                   {
                     "is_true": "1",
                     "region_id": "15",
                     "region_name": "九江市",
                   },
                   {
                     "is_true": "0",
                     "region_id": "16",
                     "region_name": "新余市",
                   },
                   {
                     "is_true": "0",
                     "region_id": "17",
                     "region_name": "鹰潭市",
                   }
                  ]

                }
            },
            props: [],
            mounted() {
            },
    methods:{

    } }

    三,

        css 

    .statusbtn {
                    color: #d6caca;
                    cursor: not-allowed; /*这个在button上面才管用,是一个禁用的小标识*/
                }
  • 相关阅读:
    springboot 实现 aop
    使用@import导入实现了ImportBeanDefinitionRegistrar接口的类,不能被注册为bean
    Spring Boot 动态数据源(多数据源自动切换)
    springboot2动态数据源的绑定
    三分钟学会@Autowired@Qualifier@Primary注解
    java复制文件的4种方式
    五款最好的免费同步软件
    springboot2多数据源完整示例
    WebSocket 结合 Nginx 实现域名及 WSS 协议访问
    Spring的注解@Qualifier注解
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/9797681.html
Copyright © 2011-2022 走看看