博客

(vue)监听switch按钮-根据开关显示input的值

初始开启效果：



按钮关闭：

<div class="input-wrap-item">
   <label class="label-mark">后缀</label>
   <Input v-model="houzhui" placeholder="请输入" />
   <div style="overflow: hidden; line-height: 30px">
     <el-switch v-model="openDate"></el-switch>
     <span style="padding-left: 4px">使用时间后缀</span>
   </div>
 </div>

data() {
	return {
	  houzhui: "",
      newDate: "",
	}
}
  watch: { 
    //后缀按钮监听
    openDate: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == true) {
          this.houzhui = this.newDate;
        } else {
          this.houzhui = "";
        }
      },
    },
  },
  mounted() {
    this.newDate = new Date();
    if (this.openDate == true) {
      this.houzhui = this.newDate;
    }
  },