【前端】表单 编辑模式、只读模式：HTML的`readonly`、el-input的v-if=“isEdit“

在HTML中，要设置输入框为只读模式，可以使用readonly属性。在Vue中，使用v-if指令可以根据条件动态地渲染元素。

以下是一个简单的例子，展示了如何在Vue中实现一个表单输入框的编辑模式和只读模式切换。

<template>
  <div>
    <!-- 编辑按钮，点击后进入编辑模式 -->
    <button @click="isEdit = true">编辑</button>
 
    <!-- 表单输入框，根据isEdit变量的值切换只读或编辑模式 -->
    <input v-if="!isEdit" type="text" v-model="formData" readonly>
    <input v-else type="text" v-model="formData">
 
    <!-- 保存按钮，只在编辑模式下显示 -->
    <button v-if="isEdit" @click="isEdit = false">保存</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isEdit: false, // 控制编辑模式的开关
      formData: ''   // 表单数据绑定变量
    };
  }
};
</script>

在这个例子中，isEdit是一个布尔值，用来控制输入框是否为只读。v-if和v-else指令根据isEdit的值决定渲染哪个<input>元素。当isEdit为false时，表单输入框为只读；为true时，用户可以编辑输入内容。点击“编辑”按钮会将isEdit设置为true，触发显示编辑模式的输入框；点击“保存”按钮会将isEdit设置为false，触发显示只读模式的输入框，并进入只读模式。