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