聊一聊如何在 Vue3 表单中显示和隐藏元素

文章目录

介绍
创建表单元素
绑定表单元素
使用下拉框表单显示/隐藏元素
使用复选框表单显示或隐藏元素
将所有的代码整合在一起
v-show和v-if的区别

介绍

在处理表单时，根据所选选项，显示或隐藏各种字段是很常见的。我将使用Vue来有条件地显示或隐藏表单元素。在这个例子中，我将使用SFC（单文件组件）以便于我们使用。您将在下面的“将所有内容放在一起”部分中完整地看到它。

创建表单元素

这里有两个选择元素，想象一下，如果 Do you want insurance? 的答案是 Yes ，那么 insurance type 选项区域将会显示出来。

<div>
  <label for="insurance">Do you want insurance?</label>
  <select id="insurance">
    <option value="">Select</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

绑定表单元素

首先，我们需要创建变量来绑定元素。在 script 标签内定义一个 const 来表示每个元素。

<script setup>
import {ref} from "vue";

const insurance = ref();
const insuranceType = ref();
</script>

请注意， ref 是从Vue中导入的，默认情况下，没有可用于变量的指令。

ref() 允许变量具有响应性，这意味着Vue将监视它并在其状态发生变化时重新渲染该操作。

使用 v-model 将元素与变量绑定，这将创建一个双向绑定。

<div>
  <label for="insurance">Do you want insurance?</label>
  <select id="insurance" v-model="insurance">
    <option value="">Select</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType" v-model="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

显示/隐藏元素（使用下拉框表单）

现在只有在问题 Do you want insurance? 设置为 Yes 时才显示 insurance type

这可以通过将第二个选择器包裹在一个 div 中，并使用 v-show 指令来实现。

<div v-show="insurance === 'Yes'">

v-show 接受一个具有真值的条件，这个条件必须等于true或false。当条件为true时，div的内容将被显示出来，否则不会被渲染到页面上。

<div>
<label for="insurance">Do you want insurance?</label>
<select id="insurance" v-model="insurance">
  <option value="">Select</option>
  <option>Yes</option>
  <option>No</option>
</select>
</div>

<div v-show="insurance === 'Yes'">

  <div>
    <label for="insuranceType">Insurance Type</label>
    <select id="insuranceType" v-model="insuranceType">
      <option value="">Select</option>
      <option>Home</option>
      <option>Travel</option>
    </select>
  </div>

</div>

进一步进行，添加额外的选择元素，只有在选择了一个 insurance type 时才会出现。

我有2个div，只有当 insuranceType 的值与 Home 或 Travel 匹配时，才会呈现出来，这与从 Insurance Type 选择菜单中选择的选项相匹配。

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType" v-model="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

<div v-show="insuranceType === 'Home'">
  <p>Home Details</p>
</div>

<div v-show="insuranceType === 'Travel'">
  <p>Travel Details</p>
</div>

显示或隐藏（复选框表单）

当你有一个复选框，它应该在被选中时渲染标记，那该如何实现呢？

让我们创建一个类型为复选框的输入元素，我们将使用 v-model 绑定一个名为 addAComment 的变量：

<div>
  <label for="addAComment">Add a comment?</label>
  <input id="addAComment" type="checkbox" v-model="addAComment">
</div>

更新Javascript：

const addAComment = ref();

现在在 checkbox 中添加一个 v-model 属性

接下来，创建一个带有 v-show 的div，这次只需要变量，当复选框被选中时，它将具有一个值，否则将没有值。这足以激活 v-show 。

<div>
  <label for="addAComment">Add a comment?</label>
  <input id="addAComment" type="checkbox" v-model="addAComment">
</div>

<div v-show="addAComment">

  <div>
    <label for="comment">Comment</label><br>
    <textarea id="comment" v-model="comment"></textarea><br>
    {{ comment }}
  </div>

</div>

将所有的代码整合在一起

<script setup>
import {ref} from "vue";

const insurance = ref();
const insuranceType = ref();
const addAComment = ref();
const comment = ref();

</script>

<template>

  <div>
    <label for="insurance">Do you want insurance?</label>
    <select id="insurance" v-model="insurance">
      <option value="">Select</option>
      <option>Yes</option>
      <option>No</option>
    </select>
  </div>

  <div v-show="insurance === 'Yes'">

    <div>
      <label for="insuranceType">Insurance Type</label>
      <select id="insuranceType" v-model="insuranceType">
        <option value="">Select</option>
        <option>Home</option>
        <option>Travel</option>
      </select>
    </div>

    <div v-show="insuranceType === 'Home'">
      <p>Home Details</p>
    </div>

    <div v-show="insuranceType === 'Travel'">
      <p>Travel Details</p>
    </div>

  </div>

  <div>
    <label for="addAComment">Add a comment?</label>
    <input id="addAComment" type="checkbox" v-model="addAComment">
  </div>

  <div v-show="addAComment">

    <div>
      <label for="comment">Comment</label><br>
      <textarea id="comment" v-model="comment"></textarea><br>
      {{ comment }}
    </div>

  </div>

</template>

<style>
label {
  padding-right: 5px;
}
</style>

v-show与v-if的区别

需要注意的是， v-show 和 v-if 在控制元素可见性方面具有相似的作用，但它们之间存在一些关键的区别：

v-show ：该元素始终在DOM中呈现，但其CSS显示属性在none和原始值（例如block、inline等）之间切换，以显示或隐藏它。这使得频繁在可见和隐藏状态之间切换的元素更加高效。

v-if ：在DOM中，元素是有条件地创建或销毁的。当条件为false时，元素将从DOM中完全移除。这在你拥有很少使用或具有复杂渲染逻辑的元素时可以更高效，因为它们在需要时才会存在于DOM中。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。