v-text和v-html的区别

跳跳的小古风

已于 2022-02-17 16:22:24 修改

阅读量4.9k

点赞数

分类专栏：其他技术相关文章标签： html 前端 css3

于 2022-02-17 16:22:13 首次发布

本文链接：https://blog.csdn.net/weixin_43787651/article/details/122985933

版权

其他技术相关专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文探讨了Vue.js中v-text和v-html指令的差异。v-text会转义HTML标签，导致h1标签不起作用，而v-html则会直接渲染HTML，使h1标签生效。通过示例代码展示了它们在实际应用中的不同效果，强调了安全性和内容展示的考量。

摘要由CSDN通过智能技术生成

1.v-text：会把标签转义输出。即原模原样输出，h1标签没效果
2.v-html：会直接输出结果。即h1标签会出效果

<body>
    <div id="app">
        {{friend}}
        <div v-text="friend"></div>
        <div v-html="friend"></div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                friend:"<h1>hi</h1>"
            }
        })
    </script>
</body>

在这里插入图片描述

//v-指令后面的"word"本质上都是js表达式，所以可以加上字符串
//这里输出结果即：hello friend
<div v-html="word + 'friend'"></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

跳跳的小古风

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
v-text和v-html的区别

1.v-text：会把标签转义输出。即原模原样输出，h1标签没效果2.v-html：会直接输出结果。即h1标签会出效果<body> <div id="app"> {{friend}} <div v-text="friend"></div> <div v-html="friend"></div> </div> <script> .
复制链接

扫一扫