<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)
}
}複製代碼