VUE项目实践1：设置编辑按钮，可保存，双向绑定

目录结构：

​​​​​​

​​

实现效果：

​​​​

所有代码：

实现页面：ipobtion.vue

<template>
  <div>
    <div class="flex">
      <div class="flex1 title mt20 ml15">
        <h3><b>IP获取设置</b>
          <span v-if="flag" >
            <a @click="() => save()"> <a-icon  style="float: right;color: #46a6ff " class="mr20" type="save" /></a>
          </span>
          <span v-if="!flag" >
            <a @click="() => edit()"><a-icon  style="float: right;color: #46a6ff " class="mr20" type="form" /></a>
          </span>
        </h3>
      </div>
    </div>
    <div class="flex">
      <div class="flex1 title mt20 ml15">
        <a-form class="ml15">
          <label>IP发送间隔:&nbsp;&nbsp;</label>
          <a-input
              type="text"
              v-model="ipInterval"
              style="width: 120px"
              :disabled="disabled">
          </a-input>&nbsp;&nbsp;秒
          <label style="margin-left: 100px">IP池数量:&nbsp;&nbsp;</label>
          <a-input
              type="text"
              v-model="ipcount"
              style="width: 120px"
              :disabled="disabled"
          >
          </a-input>&nbsp;&nbsp;个
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:false,
      disabled:true,
      ipInterval:111111,//IP发送间隔：原始值
      ipcount:122222222,//IP池数量：原始值
    }
  },
  methods: {

    edit: function () {
      this.flag = !this.flag;
      this.disabled = !this.disabled;
      window.console.log(this.ipInterval,this.ipcount)
    },
    save(){
      this.flag=!this.flag;
      this.disabled=!this.disabled;
      window.console.log(this.ipInterval,this.ipcount)
    },
    input(){
      this.flag=true;
    },
  },
}
</script>

引用页面：index.vue

<div class=" flex1 part mt10 mr10 " style="height: 19%">
   <Ipobtion></Ipobtion>
</div>

import Ipobtion from './child/ipobtion'
export default {
  name: "index",
  components: {
    Ipobtion
  },
  data() {
    return {
      tabBarStyle: {
        'background': 'white',
        'padding-left': '10px',
        'margin': '0!important'
      }
    }
  }
}
</script>