指令之v-text和v-html

最新推荐文章于 2021-03-29 23:50:18 发布

不能say的秘密

最新推荐文章于 2021-03-29 23:50:18 发布

阅读量83

点赞数

分类专栏：每日前端学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_44169596/article/details/110875664

版权

每日前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了Vue中的两个重要指令——v-text和v-html，它们都用于在页面上输出数据，但v-text只显示纯文本，而v-html则能解析HTML标签并渲染。通过一个简单的实战示例，展示了如何在Vue应用中使用这两个指令，以及它们在实际场景中的应用差异。

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

指令之v-text和v-html

1、什么是指令：在vue中提供了一些对于页面+数据的更为方便输出。

2、实战训练：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>指令之v-text和v-html</title>
</head>
<body>
    <div id="app">
        <h2 v-text='msg'></h2>
        <div v-html='htmlMsg'></div>
    </div>
    <!--引包-->
    <script src="vue.js"></script>
    <script>
        //{{}}和v-text的作用是一样的，都是插入值，直接渲染，
        //v-html 既能插入值，又能插入标签
        new Vue({
            el:'#app',
            data:{
                msg:"插入标签",
                htmlMsg:'<h3>很神奇</h3>'
            }
        })
    </script>
</body>
</html>

3、代码结果：

不能say的秘密

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
指令之v-text和v-html

指令之v-text和v-html1、什么是指令：在vue中提供了一些对于页面+数据的更为方便输出。2、实战训练：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale"> <meta http-equiv="X-UA
复制链接

扫一扫