vue js里面v-html,vue.js v-text和v-html的使用

本文通过五个示例详细阐述了Vue中v-text和v-html的区别,包括是否进行HTML转义、动态内容处理及它们在模板中的运算与拼接。v-text确保内容安全,对HTML标签进行转义,而v-html则允许插入动态的HTML内容,但可能引入XSS攻击风险。此外,两者在页面加载时均无闪烁问题。
摘要由CSDN通过智能技术生成

v-text 和 v-html的使用

代码

这里不严格的截取代码为了浏览方便

//html

++++{{first}}-----

// vue是什么

xxxxx

// 5vue是什么?vue是一个渐进式框架

//

我是一个标签

// 我是一个标签

++++{{h1}}-----

// ++++

我是一个标签

-----

//js的代码

var vm = new Vue({

el:'#ctr-01',

data:{

first:'vue是什么?',

h1:'

我是一个标签

'

}

})

上面5个例子展示了v-html 和 v-text的差别之处:是否对标签进行转义

还要说明的几点

1.v-text和v-html=“” 双引号之内是一个表达式 它可以如同js中的表达式一样进行运算,拼接字符串

2.v-text和v-html没有闪烁问题 因为他们一开始就没有内容,也可以一开始就添加内容,加载完会被覆盖

3.插值表达式的值 会按照v-text对标签进行转义

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值