（3）数据绑定指令

liuyang___

于 2022-06-04 11:40:02 发布

阅读量66

点赞数

分类专栏： vue学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/125120151

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中v-text和v-html指令的使用，v-text用于安全地填充纯文本，而v-html则可以渲染HTML片段，但可能带来XSS安全风险。在处理第三方数据时，应避免使用v-html。v-pre则用于展示原始的不受编译影响的文本。示例代码展示了这些指令的实际应用。

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

v-text 填充纯文本

相比插值表达式更简洁

v-html填充html片段

存在安全问题

本网站内部数据可以使用，来自第三方的数据不可以用

v-pre填充原始信息

显示原始信息，跳过编译过程（分析编译过程）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="msg1"></div>
        <div v-pre>{{msg}}</div>
    </div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
            msg1:'<h1>html</h1>'
        }
        })
</script>
</body>

</html>