首页
登录 | 注册

七、v-text和v-html指令

                            v-text和v-html指令

        我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:

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

        如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。

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

        双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。 完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text & v-html 实例</title>
    <!--引入Vue.js-->
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    排序的用法:
    <div id="app">
        <span>{{ message }}</span>
        <br/>
        <span v-text="message"></span>
        <hr/>
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:"{{ message }}  等于 v-text=\"message\"",
                msgHtml:'<h2>hello Vue!</h2>'
            }
        })
    </script>
</body>
</html>

相关文章

  • 从虚拟化前端Bug学习分析Kernel Dump
    前言 也许大家都知道,分析 Kernel Dump 有个常用的工具叫 Crash,在我刚开始学习分析 Kernel Dump 的时候,总是花大量的时间折腾这个工具的用法,却总是记不住这个工具的功能.后来有一次在参加某次内部分享的时候,有位大 ...
  • 简单的SSM-Shiro安全框架搭建
    首先需要导jar包! 配置你自己的web.xml CharacterEncodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding utf-8 f ...
  • 源码|详解分布式事务之 Seata-Client 原理及流程
    前言 在分布式系统中,分布式事务是一个必须要解决的问题,目前使用较多的是最终一致性方案.自年初阿里开源了Fescar(四月初更名为Seata)后,该项目受到了极大的关注,目前已接近 8000 Star.Seata 以高性能和零侵入的特性为目 ...

2019 jeepshoe.net webmaster#jeepshoe.net
13 q. 0.360 s.
京ICP备10005923号