v-text
v-text是vue提供的一个指令,用于更新标签中的内容,和jquery中的innerText和innerHTML很像。
v-html
用于向标签插入html内容,内容按普通 HTML 插入。
结论:插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据,会替换掉节点里所有的内容;v-html会在指定标签插入html内容。
v-text注意事项
使用插值表达式的时候,如果页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据,可以使用 v-text解决该问题。
v-html注意事项
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局
閱讀更多 就叫春哥 的文章