Vue.js入门-内置指令v-html

时间:2022-12-21 13:14:52

详细:

更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue learning</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="demo" v-html="msg"></div>

<script>
var app = new Vue({
el:'#demo',
data:{
msg:'<ul><li>sadf</li><li>ewq</li></ul>',
}
});
</script>

</body>
</html>

效果:
●sadf
●ewq