VUE的本地应用-V- html

最新推荐文章于 2024-07-01 18:42:41 发布

dream_uping

最新推荐文章于 2024-07-01 18:42:41 发布

阅读量718

点赞数 1

分类专栏：前端VUE的初识文章标签： VUE的本地应用V- html

本文链接：https://blog.csdn.net/weixin_42859280/article/details/105763853

版权

前端VUE的初识专栏收录该内容

20 篇文章 1 订阅

订阅专栏

◆v-html指令的作用是:设置元素的innerHTML
◆内容中有htm|结构会被解析为标签

◆v-text指令无论内容是什么,只会解析为文本
◆解析文本使用v-text,需要解析htm|结构使用v-html

结果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V-HTML指令</title>
</head>

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>看来并无区别<hr>
        <p v-html="info"></p>
        <p v-text="info"></p>看区别<hr>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app"></div>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{content:"你好呀！VUE！",
                info:"<a href = 'https://www.baidu.com/'>点击跳转</a>"}
            }
        )
    </script>
    
</body>
</html>