如何利用Vue.js库中的v-html指令添加html元素

1、新建html文档，然后在head标签中引入vue的js文件，这里以引入cdn文件为例：

2、在body标签中添加一个id为“app”的div标签，然后在这个div标签中再添加一个div标签，在vue中添加一个变量数据，然后用“{{}}”符号将变量引入到div标签中，并且在标签中添加“v-html="变量"v-html="变量"”属性：

3、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素：

动态添加的html代码，如果在还没有真正渲染生成dom之前，js是无法获取到它们的，也就是节点根本不存在，所以原本的js就无法生效。

对于动态生成的html，应该在生成完成之后再执行一次需要对这些html *** 作的js代码。

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。

1、用innerHTML写入html代码：

<div id="abc"></div>

<script>document.getElementById("abc").innerHTML="要写入的文字或内容"</script>

2、appendChild() 方法：

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<button onclick="myFunction()">点击向列表添加项目</button>

<script>

function myFunction(){

var node=document.createElement("LI")

var textnode=document.createTextNode("Water")

node.appendChild(textnode)

document.getElementById("myList").appendChild(node)

}

</script>

---