vue使用iview实现单选,禁选,下拉框的效果

<div class="content">
    <p>
      <span>控制</span>
      <RadioGroup v-model="animal" @on-change="KongFun">
        <Radio label="启用"></Radio>
        <Radio label="禁用"></Radio>
      </RadioGroup>
    </p>
    <p>
      <span>IP地址</span>
      <RadioGroup v-model="animalIP" @on-change="IPFun">
        <Radio label="静态IP" :disabled="disabledF"></Radio>
        <Radio label="自动分配" :disabled="disabledF"></Radio>
      </RadioGroup>
    </p>
    <p>
      <span>IP</span>
      <Input v-model="value1"  placeholder="请填写IP" :disabled="disabled"/>
    </p>
    <p>
      <span>mask</span>
      <Input v-model="value2"  placeholder="请填写mask" :disabled="disabled"/>
    </p>
    <p>
      <span>Gw</span>
      <Input v-model="value3"  placeholder="请填写Gw" :disabled="disabled"/>
    </p>
    <p>
      <span>模式选择</span>
      <Select style="width:100px" @on-change="selectFun" v-model="valueOption">
        <Option v-for="item in userList" :value="item.userName"  :key="item.userId" >{{item.userName}}</Option>
      </Select>
    </p>
  </div>  
  data(){
      return{
        animal:'启用',
        animalIP:'静态IP',
        value1:'',
        value2:'',
        value3:'',
        disabled:false,//禁止input框
        disabledF:false,//禁止单选框
        valueOption:'asp',//下拉列表默认显示
        userList:[//下拉列表的数据
          {
            userId:'1',
            userName:'asp',
          },
          {
            userId:'2',
            userName:'sta',
          }
        ]
      }
  },
  methods:{
  //点击控制时
      KongFun(){
        console.log(this.animal)
        if(this.animal=='禁用'){
            this.disabled=true
            this.disabledF=true
        }else{
           this.disabled=false
           this.disabledF=false
        }
      },
    //点击ip时
    IPFun(){
      if(this.animalIP=='自动分配'){
        this.disabled=true
        this.disabledF=false
      }else{
        this.disabled=false
        this.disabledF=false
      }
    },
    //点击下拉列表的时候
    selectFun(){
        console.log(this.valueOption)
    }
  }复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值