v-text/v-html

最新推荐文章于 2024-03-10 15:23:56 发布

Jaylen不写bug

最新推荐文章于 2024-03-10 15:23:56 发布

阅读量118

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jaylen1997/article/details/117783899

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本的插值表达式只能解决简单的数据显示，至于更复杂的功能，就涉及到 vue 中的指令。

v-text / v-html 都是对于文本处理的指令，功能上和插值表达式类似。

指令名称	说明
v-text	主要用于处理渲染纯文本，被渲染标签内部的内容会被全部覆盖
v-html	可以渲染纯文本，也可以渲染 HTML 代码，所以需要注意网站安全问题

示例代码：

<body>
    <div id="app">
        <!-- v-text -->
        <p v-text="message">AAA</p>
        <p v-text="name + '123'"></p>
        <p v-text="message + name"></p>
        <p v-text="code">BBB</p>
        <hr>
        <!-- v-html -->
        <p v-html="message"></p>
        <p v-html="code"></p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue",
            name: "Dylan",
            code: "<a href='http://www.baidu.com'>百度</a>"
        }
    })
</script>