vue ：v-text和v-html的區別和使用

首先新建一個小demo
html

<div id="app">
	<div>{{name}}</div>
	<div v-text="name"></div>
	<div v-html="name"></div>
</div>

js

var app = new Vue({
		el:'#app',
		data:{
			name:"<h1>Min</h1>"
		}
	})

我們由此可以看出v-html和v-text的區別，v-html會自動解析h1標籤，v-text不會

在v-text等v開頭的指令後面所跟的其實都是js表達式，在其中我們不僅可以加一些變量，還可以加字符串
我們對上面的html代碼和js代碼進行修改
html

<div id="app">
		<div>{{name + ' min'}}</div>
		<div v-text="name + ' min'"></div>
		<div v-html="name + ' min'" ></div>
</div>

js

<script>
		var app = new Vue({
			el:'#app',
			data:{
				name:"Min"
			}
		})
</script>