介绍
在处理表单时，根据所选选项，显示或隐藏各种字段是很常见的。我将使用Vue来有条件地显示或隐藏表单元素。在这个例子中，我将使用SFC（单文件组件）以便于我们使用。您将在下面的“将所有内容放在一起”部分中完整地看到它。
创建表单元素
这里有两个选择元素，想象一下，如果 Do you want insurance? 的答案是 Yes ，那么 insurance type 选项区域将会显示出来。
代码语言：javascript复制<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 来表示每个元素。
代码语言：javascript复制<script setup>
import {ref} from "vue";
const insurance = ref();
const insuranceType = ref();
</script>请注意， ref 是从Vue中导入的，默认情况下，没有可用于变量的指令。
ref() 允许变量具有响应性，这意味着Vue将监视它并在其状态发生变化时重新渲染该操作。
使用 v-model 将元素与变量绑定，这将创建一个双向绑定。
代码语言：javascript复制<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 指令来实现。
代码语言：javascript复制<div v-show="insurance === 'Yes'">v-show 接受一个具有真值的条件，这个条件必须等于true或false。当条件为true时，div的内容将被显示出来，否则不会被渲染到页面上。
代码语言：javascript复制<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 选择菜单中选择的选项相匹配。
代码语言：javascript复制<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 的变量：
代码语言：javascript复制<div>
<label for="addAComment">Add a comment?</label>
<input id="addAComment" type="checkbox" v-model="addAComment">
</div>更新Javascript：
代码语言：javascript复制const addAComment = ref();现在在 checkbox 中添加一个 v-model 属性
接下来，创建一个带有 v-show 的div，这次只需要变量，当复选框被选中时，它将具有一个值，否则将没有值。这足以激活 v-show 。
代码语言：javascript复制<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>将所有的代码整合在一起
代码语言：javascript复制<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中。
