别忘了先打开我们的菜鸟编辑器当做草纸吧:在线菜鸟编辑器
html插入
看这个知识点的名字,html插入。我第一次看到的时候就有点懵,这是要插入到哪,为什么插入,等等疑惑瞬间上线。
然后看了看示范代码就明白了,这是说你可以用vue 往一个元素标签内插入其他元素标签。
具体操作:当做母体的标签 要你去手写一个属性叫 v-html,它的值是一个变量名,然后你再vue构造器内的data属性中,写好这个变量名和真实的值,就能实现插入,这个要插入的值这里可以是元素标签也可以是其他文案或数字。
如图上图所示,这个变量名就叫message,要插入的值 就是一个h1元素标签。最终会成功显示在这个div里。
插入数字,可以成功。
插入字符串,可以成功。
插入列表等可以求值的格式,都可以成功。
插入非法格式,比如没有引号的字符串则会失败。
变量名在vue构造器中data内找不到 ,也会报错失败。
而如果vue变量找不到或求值失败,那么这个div则会显示原本的内容:
这就说明,这次所谓的插入v-html属性,其实是重写了这个标签内的一切,覆盖了原本的值。