Vue基础学习 指令 v-text和v-html

我们通过{{变量}}这种方式，会在html中输出data中的值了，

这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，

会暴露我们的{{xxx}}。这样让用户看见很不友好！

Vue给我们提供的v-text,就是解决这个问题的

下面的这两种方式可以达到一样的效果

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

v-html（不建议使用）

  <div id="app">
       //v-html是直接可以显示html标签的
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
            
                msgHtml:'<h2>hello Vue!</h2>'
            }
        })
    </script>

{{}}会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。