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