判断input内容是否被编辑 vue

在Vue中，可以通过两种方式来判断input内容是否被编辑。

第一种方式是通过使用v-model指令来绑定输入框的值，并定义一个变量来保存输入框的初始值。当用户在输入框中输入内容时，可以比较输入框的值和初始值是否相同，如果不同则表示内容被编辑过。例如：

<template>
  <div>
    <input v-model="inputValue" type="text">
    <button @click="checkEdited">判断是否被编辑</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      initialValue: ''
    };
  },
  methods: {
    checkEdited() {
      if (this.inputValue !== this.initialValue) {
        console.log('内容已被编辑');
      } else {
        console.log('内容未被编辑');
      }
    }
  },
  mounted() {
    this.initialValue = this.inputValue;
  }
}
</script>

第二种方式是通过监听输入框的input事件来判断内容是否被编辑。当用户在输入框中输入内容时，可以将一个boolean类型的变量设为true来表示内容被编辑过。例如：

<template>
  <div>
    <input @input="inputEdited" type="text">
    <button @click="checkEdited">判断是否被编辑</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      edited: false
    };
  },
  methods: {
    inputEdited() {
      this.edited = true;
    },
    checkEdited() {
      if (this.edited) {
        console.log('内容已被编辑');
      } else {
        console.log('内容未被编辑');
      }
    }
  }
}
</script>

以上两种方式都可以判断输入框中的内容是否被编辑过，具体选择哪种方式取决于具体的需求和项目的情况。