vue中{{}},v-text和v-html区别与应用详解
更新时间:2021年09月09日 10:26:49 作者:栗栗本栗
这篇文章主要介绍了vue中{{}},v-text和v-html区别与应用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
- {{}}获取值,不会清空标签原有内容
- v-text 获取值,会清空标签原有内容,输出的是纯文本
- v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>上午好{{info}}</p> <p v-text="info">上午好</p> <p v-html="info">上午好</p> <hr> <p v-text="addr">hhh</p> <p v-html="addr">hhh</p> <hr> <p v-text="addr2">hhh</p> <p v-html="addr2">hhh</p> </div> </body> </html> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ info:"good", addr:"<a href='https://www.baidu.com'>点击进入百度</a>", addr2:'<a href="https://www.baidu.com" rel="external nofollow" >百度</a>' } }); </script>
到此这篇关于vue中{{}},v-text和v-html区别与应用详解的文章就介绍到这了,更多相关vue中{{}},v-text和v-html区别与应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下2023-12-12vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Element ui table表格内容超出隐藏显示省略号问题
这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,2023-11-11
最新评论