vue2 v-html 安全,（四）Vue2.X指令——v-text、v-html

v-text：用来输出文本，和{{message}}作用类似

v-html：用来解析并正确显示带有html标签的文本

注意：{{message}}这种写法的弊端：在javascript出错或者网速较慢时，会直接在屏幕中显示出{{message}}，造成不是很好的用户体验，所以我们用v-text来做优化，在项目实际开发中，采用的也是v-text写法居多。

example下新建v-text.html文件

v-text&v-html

v-text&v-html

---

插值表达式输出：{{message}}

v-text输出：

插值表达式输出含html代码的文本：{{htmlStr}}

v-html正确解析含html代码的文本：

var app = new Vue({

el:'#app',

data:{

message:'Hello World!！！',

htmlStr:'

这是h2标签

'

}

})

index.html

Vue

My Vue 2.x

---

1. Hello World
2. v-if v-else v-show
3. v-for
4. v-text v-html