<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實現單選,禁選,下拉框的效果
相關文章
- 使用Vue實現下拉選單框批量新增選項Vue
- 選擇下拉選單項實現跳轉效果
- 使用JS實現一個簡單的選項卡效果JS
- css實現的二級下拉選單效果CSS
- 用Javascript實現選單摺疊效果JavaScript
- Path實現常見toolbar點選彈出選單效果
- 選中select下拉選單option項實現提交效果
- uniapp 實現複選下拉框APP
- Vue實現左右選單聯動實現(更新)Vue
- (十)如果實現滑動展示選單效果
- TornadoFx實現側邊欄選單效果
- vue使用element元件實現選單的摺疊與展開Vue元件
- js實現的響應式導航選單效果JS
- 如何不使用js實現滑鼠hover彈出選單效果JS
- 點選enter和ctrl實現表單提交效果
- Vue.js自定義下拉選單,如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- Vue.js 實現的 3D Tab選單Vue.js3D
- JavaScript實現選項卡效果JavaScript
- css實現立體效果橫向導航選單CSS
- select下拉選單實現分類級聯效果
- QT實現類似於網頁step 選單效果QT網頁
- 使用CSS實現逼真的水波紋點選效果CSS
- vue checkbox 實現全選,取消全選Vue
- (系列十)Vue3中選單和路由的結合使用,實現選單的動態切換(附原始碼)Vue路由原始碼
- Vue之網易雲音樂橫向選單的實現Vue
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- iview中下拉框的資料繫結使用View
- jQuery 實現checkBox全選效果jQuery
- iview input實現點選和enter同時搜尋技巧View
- vue下拉選單Vue
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- Vue element下拉框加一個自定義的選項Vue
- Vue遞迴元件實現樹形結構選單Vue遞迴元件
- 選單中的命令的實現
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- vue實現城市列表選擇Vue
- 使用jQuery實現的取消radio按鈕選中效果jQuery
- Ionic如何實現單選二級選單切換