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