04.新手入门vue之v-text和v-html

v-text

v-text是vue提供的一个指令,用于更新标签中的内容,和jquery中的innerText和innerHTML很像。


04.新手入门vue之v-text和v-html


v-html

用于向标签插入html内容,内容按普通 HTML 插入。

04.新手入门vue之v-text和v-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 或用一个额外的全局


分享到:


相關文章: