关于vue.js:vueelement使用switch使用三

vue+element应用switch应用三

1.开发环境 vue+element
2.电脑系统 windows 10 专业版
3.在应用 vue+element 进行开发的过程中,依据我的项目的需要咱们会应用到 swicth 开关!上面我来分享一下 swicth开发的应用以及怎么把对应的状态传给后盾!
3-1:咱们要实现成果如下:

3-2:在 template 中增加如下代码:

<el-form-item  label="是否停机">
    <el-switch
     v-model="isDow"
     active-color="#13ce66"
     inactive-color="#ff4949">
    </el-switch>
</el-form-item>



<el-form-item  label="是否更换">
     <el-switch
      v-model="isChan"
      active-color="#13ce66"
      inactive-color="#ff4949">
     </el-switch>
</el-form-item>

3-3:在return中增加如下代码:

isDow2:"",
isChan2:"",
//管制是否停机
isChan:true,
isDow:true,

3-4:在watch中增加如下代码:

"isDow":"ISDo",
"isChan":"ISChange"

3-5:在 methods 中增加如下代码:

     ISDo(val){
        console.log("是否停机状态产生了变动!");
        console.log(val);
        this.isDow2=Number(!val);
        console.log(this.isDow2);
      },
      ISChange(val){
        console.log("是否更换状态产生了变动!");
        console.log(val);
        this.isChan2=Number(!val);
        console.log(this.isChan2);
      }
      
 //备注:因为 后盾的状态是通过 0或者1进行管制的,所以咱们把 对应的 true或者是 false 转换成 0 或者 1,再通过变量进行承受而后再在点击的时候传给后盾就能够了!     

4.本期的教程到了这里就完结啦!心愿对你有所帮忙!在这个畛域不要认输,不要抬头,让咱们一起致力走向巅峰!