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

基于Vue.js的{{msg}},v-text="msg",v-html="msg"的区别献上代码区别1区别2：当字符串中有标签时献上代码<!DOCTYPE html><html lang="en"><head><meta charset=&

年年有很多余

3502人浏览 · 2018-12-31 15:43:33

年年有很多余 · 2018-12-31 15:43:33 发布

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

献上代码
区别1
区别2：当字符串中有标签时

献上代码

<!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> 
哈哈，大家好啊

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^