<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-html指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
v-html 指令
1.作用：向指定节点中渲染包含html 结构的内容
2.与插值语法的区别：
1）v-html 会替换节点中的所有内容 {{xxx}} 则不会
2）v-html 可以识别html 结构
3. 严重注意： v-html 有安全性问题
1）在网站上动态渲染任意html 是非常危险的
2）一定要在可信的内容上使用v-html,永不再用户提交的内容上
-->
<div>你好{{name}}</div>
<div v-text="name"></div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root", //el用于指定当前vue实例为那个容器服务，但通常为css选择器字符串
data: {
name: "史满意",
msg: "你好呀,郑西行",
str: "<h1>测试</h1>",
},
});
</script>
</body>
</html>