◆v-html指令的作用是:设置元素的innerHTML
◆内容中有htm|结构会被解析为标签
◆v-text指令无论内容是什么,只会解析为文本
◆解析文本使用v-text,需要解析htm|结构使用v-html
结果：
代码：
<!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>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>看来并无区别<hr>
<p v-html="info"></p>
<p v-text="info"></p>看区别<hr>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
var app = new Vue(
{
el:"#app",
data:{content:"你好呀！VUE！",
info:"<a href = 'https://www.baidu.com/'>点击跳转</a>"}
}
)
</script>
</body>
</html>
原创文章 643
获赞 1975
访问量 129万+