基于Vue.js的{{msg}},v-text="msg",v-html="msg"的区别

版权声明:版权归wsc所有 https://blog.csdn.net/qq_37543808/article/details/85468291

基于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> 
哈哈,大家好啊

猜你喜欢

转载自blog.csdn.net/qq_37543808/article/details/85468291