《跟热饭一起学习vue吧》Part.2 插入html

简介： 《跟热饭一起学习vue吧》Part.2 插入html

别忘了先打开我们的菜鸟编辑器当做草纸吧：在线菜鸟编辑器

html插入

看这个知识点的名字，html插入。我第一次看到的时候就有点懵，这是要插入到哪，为什么插入，等等疑惑瞬间上线。

然后看了看示范代码就明白了，这是说你可以用vue 往一个元素标签内插入其他元素标签。

具体操作：当做母体的标签 要你去手写一个属性叫 v-html，它的值是一个变量名，然后你再vue构造器内的data属性中，写好这个变量名和真实的值，就能实现插入，这个要插入的值这里可以是元素标签也可以是其他文案或数字。

如图上图所示，这个变量名就叫message，要插入的值 就是一个h1元素标签。最终会成功显示在这个div里。

插入数字，可以成功。

插入字符串，可以成功。

插入列表等可以求值的格式，都可以成功。

插入非法格式，比如没有引号的字符串则会失败。

变量名在vue构造器中data内找不到 ，也会报错失败。

而如果vue变量找不到或求值失败，那么这个div则会显示原本的内容：

这就说明，这次所谓的插入v-html属性，其实是重写了这个标签内的一切，覆盖了原本的值。