html中，某个元素之后的其他元素全都不显示

前言

当前场景如下：
在传统前端开发中，也就是直接引入js，无模块导入和导出，html为页面。
现在我要引入vue，简化开发。（vue的数据绑定和更新更省力）
我引入了vant组件库，构建移动端页面。
于是乎，出现了标题所说的问题。
由于对vant不是特别熟悉，我甚至多试了几下，开发者工具里面调试查看元素，发现某个元素之后，所有元素都消失了。
我直接从官网搬一段代码作为示例。

<!-- 输入任意文本 -->
<van-field v-model="text" label="文本" />
<!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入正整数，调起纯数字键盘 -->
<van-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字，调起带符号的纯数字键盘 -->
<van-field v-model="number" type="number" label="数字" />
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="密码" />

比如上面的代码，最终展示只会显示文本这一行，后面手机号之类的全都看不到。

原因

上面的代码中，我们使用vant组件库的单标签，然而浏览器是不识别这些不知名的单标签的。
之所以看不出问题，是因为我用惯了Vue，理所应当地认为单标签是可以用的。
vue使用的是模板语法，显然vue文件中的dom元素并不是直接展示到页面中的，而是经过了构建工具处理。

因此改成双标签就可以了，哪怕里面没有内容。

<van-field v-model="text" label="文本" ></van-field>