Vue--HTML标签--插值语法失效

起因：前些天在做练习时被问到的

一般想到的结构

此时运行结果

问题：当使用同样的标签写时会出现插值语法失效
代码如下：

此时的效果：

但是后来我自己实验的时候还换了div标签进行测试，出现以下结果


所以上述的问题并不严谨，就开始了研究(可能当时比较无聊了)
在上网查了资料后发现，好像并没有人写过这样的问题(一般人应该也不会有这样的写代码习惯)

于是我又想到了应该是涉及到了HTML标签的问题，就换了一个方向，开始研究这两个标签的渲染问题

外层标签为h1时 页面渲染如下：

外层标签为div时 页面渲染如下：

可以发现h1时，并没有将代码包裹的部分渲染在标签内，而div时渲染进去了。

经过资料查询：
在布局html重构时候，div主要用于布局框架，大小结构布局均使用div来布局；
h1只是布局文本容器，输入文字时进行展示(参考p标签)

仅个人观点，我认为是和标签的作用有关系。
在此也提醒一下，在页面搭建时，根据标签功能使用标签，尽量做到不滥用标签，规范使用html标签元素。