谢谢你请我吃鸡腿*^_^*
支付宝扫一扫打赏
微信扫一扫打赏
实际项目中可能你经常那么写，也经常看到过，但你未必真的深刻认识这几个之间的区别，我记得在以前公司有人这么说过自己写css代码，全程靠猜，例如margin不行改padding，padding不行改定位，这就很能说明问题，对知识点理解不深刻，你不能说他不能做东西，但这样写出来的页面，自然是兼容性差，耦合性过高
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="app"> <p>{{message}}</p> <p v-html="html"></p> <p v-text="text"></p> </div> <script> let app = new Vue({ el: "#app", data: { message: "<span>通过双括号绑定</span>", html: "<span>html标签在渲染的时候被解析</span>", text: "<span>html标签在渲染的时候被源码输出</span>", } }); </script> |
1 2 3 | <span>通过双括号绑定</span> html标签在渲染的时候被解析 <span>html标签在渲染的时候被源码输出</span> |
{{message}}将数据解析为纯文本，不能输出真正的html，在页面加载时显示{{}}（就是会页面刷新闪烁默认显示{{}}），所以通常使用v-html和v-text代替；v-html="html"，输出真正的html，标签会被浏览器解析掉；v-text="text"：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不闪烁显示{{}}
上一篇：Vue.js替代vuex全局状态共享store的方案Observable-组件通信
下一篇：说说Vue.js中vm.$attrs、$listeners的实际用法
支付宝扫一扫打赏
微信扫一扫打赏
电话支持
173xxxx7240在线交流
微信添加
共 0 条评论关于"浅谈Vue.js中v-text,v-html,{{}}之间的异同"
最新评论