您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

vue中{{}},v-text和v-html区别与应用详解

51自学网 2022-05-02 21:31:59
  javascript
  • {{}}获取值,不会清空标签原有内容
  • 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区别与应用内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com!


JavaScript实现简易轮播图最全代码解析(ES6面向对象)
vuex结合session存储数据解决页面刷新数据丢失问题
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1