首页 前端知识 【前端4】表单 编辑模式、只读模式:HTML的`readonly`、el-input的v-if=“isEdit“

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

2024-08-10 22:08:05 前端知识 前端哥 453 936 我要收藏

【前端】表单 编辑模式、只读模式

  • 写在最前面
  • 一、什么是编辑模式与只读模式?
    • 应用场景
    • 编辑模式
    • 只读模式
  • 二、编辑模式的实现例子
    • 只读模式的实现
    • 动态切换模式
      • 使用HTML的readonly属性
      • 使用Vue.js的v-if指令
  • 三、前后端交互 `<template>`代码块
    • 两个字段独立
    • 是否直接与后端接口交互,以及它们的数据变换方法
  • 四、小结


请添加图片描述

🌈你好呀!我是 是Yu欸
🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~
🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!

写在最前面

在前端开发中,表单(Forms)是用户与应用交互的关键组件。

本文将详细介绍表单的编辑模式和只读模式的定义、实现方法及其应用场景。

在前端开发中,我们可以使用HTML的readonly属性来控制表单元素的只读状态,而在使用Vue.js框架时,可以结合v-if指令来实现表单的编辑和只读切换。

同时,我们使用Vue的数据绑定功能来实现表单数据的同步更新。

在这里插入图片描述

一、什么是编辑模式与只读模式?

应用场景

  1. 用户注册与登录:在用户注册时,表单需要处于编辑模式,允许用户输入信息。而在用户查看个人资料时,可以使用只读模式。
  2. 信息审核:在信息审核页面,审核人员通常只需要查看信息而无需修改,这时可以使用只读模式。
  3. 数据展示:在数据展示页面,如报告或统计信息页面,使用只读模式可以防止误操作。

编辑模式

编辑模式是指表单处于可编辑状态,用户可以输入、修改或删除数据。这种模式通常用于用户需要提交或更新信息的场景,例如注册页面、设置页面等。

只读模式

只读模式是指表单处于不可编辑状态,用户只能查看表单中的数据,而不能对其进行修改。这种模式常用于展示信息的场景,例如查看详情页、审核页面等。

二、编辑模式的实现例子

要实现表单的编辑模式,我们需要使用HTML表单元素,例如<input><textarea><select>等。以下是一个简单的表单编辑模式的示例:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  
  <button type="submit">Submit</button>
</form>

在这个示例中,用户可以输入他们的姓名、电子邮件和消息,并通过点击“Submit”按钮提交表单。

只读模式的实现

要实现表单的只读模式,可以使用HTML的readonly属性,使表单元素变为只读状态。以下是一个简单的只读模式的示例:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="John Doe" readonly>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="john.doe@example.com" readonly>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" readonly>This is a read-only message.</textarea>
</form>

在这个示例中,所有的表单元素都被设置为只读状态,用户无法修改其中的内容。

动态切换模式

在实际应用中,常常需要在编辑模式和只读模式之间动态切换。可以通过JavaScript来实现这一功能。以下是一个示例:

使用HTML的readonly属性

<form id="userForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="John Doe">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="john.doe@example.com">
  
  <label for="message">Message:</label>
  <textarea id="message" name="message">This is a sample message.</textarea>
  
  <button type="button" id="editButton">Edit</button>
</form>

<script>
  const form = document.getElementById('userForm');
  const editButton = document.getElementById('editButton');

  editButton.addEventListener('click', () => {
    const isReadOnly = form.elements[0].hasAttribute('readonly');
    
    for (let i = 0; i < form.elements.length; i++) {
      form.elements[i].readOnly = !isReadOnly;
    }
    
    editButton.textContent = isReadOnly ? 'Save' : 'Edit';
  });
</script>

在这个示例中,点击“Edit”按钮可以在编辑模式和只读模式之间切换。

使用Vue.js的v-if指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Editable and Read-Only Form</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <form>
      <label for="name">Name:</label>
      <input v-if="isEdit" type="text" id="name" v-model="name">
      <input v-else type="text" id="name" v-model="name" readonly>

      <label for="email">Email:</label>
      <input v-if="isEdit" type="email" id="email" v-model="email">
      <input v-else type="email" id="email" v-model="email" readonly>

      <label for="message">Message:</label>
      <textarea v-if="isEdit" id="message" v-model="message"></textarea>
      <textarea v-else id="message" v-model="message" readonly></textarea>

      <button type="button" @click="toggleEdit">{{ isEdit ? 'Save' : 'Edit' }}</button>
    </form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isEdit: false,
        name: 'John Doe',
        email: 'john.doe@example.com',
        message: 'This is a sample message.'
      },
      methods: {
        toggleEdit() {
          this.isEdit = !this.isEdit;
        }
      }
    });
  </script>
</body>
</html>

三、前后端交互 <template>代码块

注:rowObjpostData 是 Vue 组件中的两个数据对象,都是是父组件表格的。

        <td colspan="4" class="tc">基线关系</td>
        <td colspan="4" class="tc">
          <el-input size="mini" v-if="isEdit" v-model="postData.formula"></el-input>
          <div v-else>{{ rowObj.formula }}</div>
        </td>

这段代码中,rowObj.formulapostData.formula用于不同的上下文和目的:

  1. rowObj.formula:

    • 这是在<div>元素内使用的,当isEditfalse时显示。
    • 它直接显示rowObj对象中formula属性的值。
    • 这通常用于只读模式,即当用户不在编辑状态时,直接展示数据。
  2. postData.formula:

    • 这是在<el-input>元素的v-model属性中使用的,当isEdittrue时。
    • v-model指令创建了一个双向数据绑定在postData对象的formula属性和输入框之间。
    • 这意味着,当用户编辑输入框中的内容时,postData.formula的值会实时更新,反之亦然。
    • 这通常用于编辑模式,允许用户修改formula的值。

rowObj.formula用于展示模式,直接显示数据,
postData.formula用于编辑模式,允许用户修改数据,并通过双向数据绑定同步更新。

两个字段独立

根据propsrowObjpostData是作为独立的属性传入组件的。它们各自维护自己的状态,且默认情况下,它们的值不会直接相互影响。这是因为:

  1. 独立性rowObjpostData作为props传入,通常意味着它们来源于父组件,且作为独立的数据源处理。除非在组件内部或父组件中有明确的逻辑来同步这两个对象的formula属性,否则它们的值不会自动相互影响。

  2. 单向数据流:Vue强调单向数据流,即props的值应该由父组件控制,子组件可以接收并使用props的值,但不应直接修改它们。如果需要基于rowObj.formula的值来更新postData.formula,应该通过事件向父组件通信或使用.sync修饰符、v-model等方式来实现双向绑定或状态同步,但这需要额外的代码实现。

  3. 编辑模式与数据同步:如果有需求在编辑模式下将rowObj.formula的值同步到postData.formula,这通常需要通过特定的逻辑来实现,比如在isEdit变为true时,手动设置postData.formula = rowObj.formula,或者通过监听器(watchers)来实现这种同步。

所以,除非在组件内部或通过父组件有明确的逻辑来同步这两个属性,rowObj.formulapostData.formula的值不会自动相互影响。

是否直接与后端接口交互,以及它们的数据变换方法

通常,与后端接口的交互会在 Vue 组件的 methods 或者 lifecycle hooks(如 created, mounted)中进行。数据变换方法也可能在这些部分定义,或者通过 Vue 的 computed properties 实现。

为了确定 rowObjpostData 是否与后端接口交互,以及它们的数据变换方法,你需要查看以下几个方面的代码:

  1. 查看 Vue 组件的 methods:搜索是否有 AJAX 请求(如使用 axios.get, axios.post 等)来获取或发送数据到后端。
  2. 查看 Vue 组件的 lifecycle hooks:在 createdmounted 钩子中,可能会有调用后端接口的代码。
  3. 查看 computed properties:如果有对 rowObjpostData 进行处理或变换的逻辑,可能会在 computed properties 中定义。
  4. 查看 Vuex store(如果使用):如果项目中使用了 Vuex 来管理状态,那么与后端的交互可能在 actions 中进行,同时 mutations 可能会用于更新 rowObjpostData

由于这些信息需要查看完整的 Vue 组件代码或项目代码才能确定,建议你根据上述提示在你的项目中进行搜索和分析。

四、小结

通过合理地使用这两种模式,可以提升用户体验和应用的易用性。希望本文对你在前端开发中处理表单有所帮助。

如果你有任何疑问或需要进一步的帮助,请在评论区留言。祝你开发顺利!


hello,我是 是Yu欸 。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。
原文链接 👉 ,⚡️更新更及时。

欢迎大家添加好友交流。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15205.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!