vue+element应用switch五
1.开发环境 vue+element
2.电脑系统 windows 10 专业版
3.在开发的过程中,咱们常常会应用到 vue+element进行开发,依据我的项目需要咱们常常会应用到 element中的 switch 的开关组件!联合我的项目进行形容!
3-1:要实现的成果如下:
+++点击批改按钮,成果如下:
//当我点击批改按钮,把之前开关的状态 和 点击批改的时候保持一致!当点击批改之后,批改的状态和显示的状态要进行同步!办法如下:
3-2:在 template 中增加如下代码:
<el-col :span="24"> <el-form-item label="是否停机"> <el-switch v-model="isDow" active-value="0" inactive-value="1" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </el-form-item></el-col><!-- 设置是否停机 完结啦 --><!-- 设置是否更换 --><el-col :span="24"> <el-form-item label="是否更换"> <el-switch v-model="isChan" active-value="0" inactive-value="1" active-color="#13ce66" inactive-color="#ff4949" > </el-switch> </el-form-item></el-col>3-3:在点击批改的时候,先进行一个清空操作,代码如下:
this.isDow="";this.isChan="";this.isDow=row.isDown;this.isChan=row.isReplace;//留神:这四个值是在 return 上面进行定义的!3-5:在watch中增加如下代码:
"isDow":"ISDo","isChan":"ISChange"//留神:这个操作解释:只有 switch v-model 绑定的值一产生了变动,就会触发这个办法,目标:为了拿到变动之后的值3-6:监听之后,要增加对应的监听函数:
ISDo(val){ console.log("是否停机状态产生了变动!"); console.log(val); this.isDow2=val; console.log(this.isDow2); }, ISChange(val){ console.log("是否更换状态产生了变动!"); console.log(val); this.isChan2=val; console.log(this.isChan2); }3-7:当我点击批改的之后,上面这两个开关的状态如下:
3-8:当我批改之后如下:
当即确定按钮之后,效果图如下:
//此时我再点击批改,如下图:
//此时得出结论,批改之后和显示的数据状态放弃始终!显示的数据转状态和点击批改的时候,状态也是保持一致的!
4.本期的教程到了这里就完结啦,心愿对你有所帮忙!让咱们一起致力走向巅峰!