Vue学习小札——2.1 模板语法

189 阅读1分钟

Vue 2.0学习笔记:v-text和v-html



一:插值

在Vue中,我们可以使用{{}}将数据插入到相应的模板中,这种方法是一种文本插值。使用这种方法,如果网络慢或者JavaScript出错的话,会将{{}}直接渲染到页面中。Vue还提供了v-textv-html来渲染文本或元素。其中v-text{{}}类似,只是用来渲染文本内容,而v-htmlinnerHTML非常相类,可以将HTML元素渲染。

个人建议不要使用v-html,因为会引起XSS攻击,对于动态渲染应该尽量使用v-text

{{}} :纯文本输出

v-text :和{{}}相同

v-html :输出真正的html

“你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元”

在Vue中,不能通过{{}}v-text将HTML的元素插入到模板中。

 "<h1 v-text="name">{{name}}Dell</h1>"