<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
- uniapp 實現複選下拉框APP
- TornadoFx實現側邊欄選單效果
- (十)如果實現滑動展示選單效果
- Vue實現左右選單聯動實現(更新)Vue
- 如何不使用js實現滑鼠hover彈出選單效果JS
- vue使用element元件實現選單的摺疊與展開Vue元件
- JavaScript實現選項卡效果JavaScript
- 使用CSS實現逼真的水波紋點選效果CSS
- Vue.js 實現的 3D Tab選單Vue.js3D
- vue checkbox 實現全選,取消全選Vue
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- (系列十)Vue3中選單和路由的結合使用,實現選單的動態切換(附原始碼)Vue路由原始碼
- iview中下拉框的資料繫結使用View
- 讓前端的下拉框支援單選、多選及全選,後臺MyBaits解決方案前端AI
- android短影片開發,點選兩次實現不同點選效果的實現方式Android
- Vue遞迴元件實現樹形結構選單Vue遞迴元件
- iview input實現點選和enter同時搜尋技巧View
- Vue element下拉框加一個自定義的選項Vue
- vxe-table 單選、實現表格單選資料
- Vue之網易雲音樂橫向選單的實現Vue
- vue下拉選單Vue
- checkbox及css實現點選下拉選單CSS
- vue實現城市列表選擇Vue
- SVG點選實現動態放大的圓效果SVG
- Cocos Creator實戰-使用粒子資源實現螢幕點選效果
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS
- 短視訊直播系統,選擇選項時,點選出現下拉框
- vue原生指令v-model實現自定義樣式の多選與單選Vue
- 使用Vue實現後臺管理系統的動態路由以及側邊欄選單Vue路由
- Angular實現虛擬滾動多選下拉框筆記Angular筆記
- Vue 框架-06-條件語句 v-if 實現選項卡效果Vue框架
- 請問各位大佬,vue如何實現點選按鈕切換圖片的效果?Vue
- 直播平臺製作,vue el-dropdown下拉框單選有對鉤高亮Vue
- 多選下拉框xmSelect
- Qt右鍵選單實現QT
- vue點選下載圖片的實現Vue