基于Vue.js的{{msg}},v-text="msg",v-html="msg"的区别
献上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<p>--------{{msg}}++++++++</p>
<p v-text="msg">------</p>
<p v-html="msg+1">======</p>
</div>
<div>
<p>------{{msg2}}++++++++</p>
<p v-text="msg2">------</p>
<p v-html="msg2">======</p>
</div>
</div>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
msg:1111,
msg2:"<h1>哈哈，大家好啊</h1>"
}
})
</script>
</body>
</html>
区别1
//第一个p标签：msg的内容1111
--------1111++++++++
//第二个p标签：v-text会覆盖原有的------
1111
//第三个p标签：v-html会覆盖原有的------，与v-text相同
1112
区别2：当字符串中有标签时
------<h1>哈哈，大家好啊</h1>++++++++
<h1>哈哈，大家好啊</h1>
哈哈，大家好啊
3912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
