vue v-html 指令,Vue学习之路第四篇:v-html指令

上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上:

1、插值表达式

2、v-text指令

但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:

这是一个h1元素内容。我们先用插值表达式和v-text尝试一下。

{{ msg }}

el : "#app"

msg :

"

这是一个h1元素内容

"

}

});

运行结果,如下:

bd1313100908e72d825817aaefbc042f.png

结论:插值表达式和v-text指令被直接解析为了字符串元素。对此Vue提供了另外一个指令:v-html

{{ msg }}

el : "#app"

msg :

"

这是一个h1元素内容

"

}

});

运行结果:

39cbebe1e9e0d9f0e0654376c220c6ba.png

成功的解析了标签属性。大家也可以尝试定义样式属性看看,如下:

这是一个h1元素内容

每天进步一点点!

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值