VueJS----[内部指令-1.4]----v-text & v-html

最新推荐文章于 2024-04-29 21:08:23 发布

_cheny

最新推荐文章于 2024-04-29 21:08:23 发布

阅读量145

点赞数

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

本文链接：https://blog.csdn.net/u010996565/article/details/81176789

版权

VueJS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

v-text & v-html

我们已经可以在html中输出data中的值了，用的是{{xxx}}这种方式，但是这种方式是有弊端的，就是当我们网速很慢或者JavaScript出错的时候，会暴露我们的{{xxx}}。因此Vue给我们提供了v-text，就是解决这个问题的

<span>{{ message }}</span>=<span v-text="message"></span><br/>

v-text只在单闭合的标签中起作用，是innerText
如果在JavaScript中写html标签，那么用v-text是输出不出来的，这个时候就要用到v-html标签了

<span v-html="todo"></span>

var app = new Vue({
    el:'#app',
    data:{
        todo:'<h2>Hello World</h2>'
    }
});

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的html，就需要使用v-html指令
需要注意的是：在生产环境中冬天渲染html是很危险的，因为容易导致xss攻击，所以只能在可信的内容上使用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-text v-html</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text v-html</h1>
    <div id="app">
        <span v-text='message'></span>
        <input type="text" v-text="message" name="" id="">
        <input type="text" name="" v-text="message" id="">
        <span v-html="todo"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world',
                todo:'<h2>Hello World</h2>'
            }
        });
    </script>
</body>
</html>