关于vue.js:vueelement使用switch五

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.本期的教程到了这里就完结啦,心愿对你有所帮忙!让咱们一起致力走向巅峰!