<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)
}
}复制代码
vue使用iview实现单选,禁选,下拉框的效果
最新推荐文章于 2024-07-17 17:59:27 发布