Vue.js实现输入框默认只读，点击按钮后可编辑的方法

这事儿用Vue的响应式特性就能轻松搞定，我给你整理了具体的实现步骤和代码：

步骤1：添加控制状态的响应式数据 #

在你的Vue组件的data选项里，新增一个布尔值变量，用来控制输入框的可编辑状态：

data() {
  return {
    userDetails: {
      email: '',
      contactNumber: ''
    },
    isInputEditable: false // 默认不可编辑，对应输入框只读状态
  }
}

步骤2：给输入框绑定只读属性 #

修改你的输入框代码，通过:readonly指令绑定刚才定义的状态变量，让输入框默认处于只读状态：

<div> 
  <input 
    type="text" 
    placeholder="Example@scio.com" 
    v-model="userDetails.email"
    :readonly="!isInputEditable"
  > 
</div> 
<div> 
  <input 
    type="text" 
    placeholder="+91 860 420 3001" 
    v-model="userDetails.contactNumber"
    :readonly="!isInputEditable"
  > 
</div>

这里的逻辑是：当isInputEditable为false时，!isInputEditable就是true，输入框处于只读状态；反之则切换为可编辑。

步骤3：给铅笔图标添加点击事件 #

在你的触发元素（铅笔图标）上添加点击事件，切换isInputEditable的值，实现状态切换：

<img 
  class="pencil-image" 
  src="你的图标路径"
  @click="isInputEditable = !isInputEditable"
  alt="编辑图标"
>

如果你只需要点击一次后永久变为可编辑（不需要再切回只读），就把点击事件改成@click="isInputEditable = true"即可。

这样一来，页面加载时输入框默认是只读状态，点击铅笔图标后就会立刻变成可编辑状态啦～

内容的提问来源于stack exchange，提问作者user9563422