v-text 相当于过去学习的innerText
v-html相当于过去学习的innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 插值的方式:可以将指定的数据插入到指定的位置 -->
<p>+++++{{name}}+++++++</p>
<!-- 插值的方式:不会解析html -->
<p>+++++{{msg}}+++++++</p>
<p>----------------------------------------------------------------------------</p>
<!-- v-text的方式:会覆盖原有的内容 -->
<p v-text="name">++++++</p>
<!-- v-text的方式:也不会解析html -->
<p v-text="msg">+++++</p>
<p>----------------------------------------------------------------------------</p>
<!-- v-html的方式:会覆盖原有的内容 -->
<p v-html="name">++++++</p>
<!-- v-html的方式:会解析html -->
<p v-html="msg">+++++</p>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name:"zhangsan",
msg:"<span>我是span</span>"
},
methods: {}
});
</script>
</body>
</html>