Vue中文本渲染三种方法 {{}}、v-html、v-text的区别

曾经终败给现在 2021-07-24 23:10 352阅读 0赞

# v-text和\{ \{\}\} #

说明：显示普通文本

简写方式：\{ \{\}\}

语法：

1：<p v-text="msg"></p>
    2：<p>{
       {msg}}</p>

实例

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <div id="app">
           	   <p v-text='msg1'></p>
           	   <p>{
       {msg2}}</p>
            </div>
        </body>
        <script src="../vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                  msg1:'这是一个消息',
                  msg2:'这是另外一个消息'
                }
            })
        </script>
    </html>

页面效果：

![2021031018325217.png][]

# v-html #

说明：输出真正的 HTML

语法：<p v-html='msg'></p>

实例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <div id="app">
           	   <p v-html='msg3'></p>
            </div>
        </body>
        <script src="../vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                  msg1:'这是一个消息',
                  msg2:'这是另外一个消息',
                  msg3:'<strong>这是一个html<strong>'
                }
            })
        </script>
    </html>

页面效果：

![20210310183709313.png][]

# 区别 #

v-html输出真正的 HTML，v-text仅渲染标签，不能解析 HTML 代码

实例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <div id="app">
           	   <p v-text='msg3'></p>
           	   <p>{
       {msg3}}</p>
           	   <p v-html='msg3'></p>
            </div>
        </body>
        <script src="../vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                  msg1:'这是一个消息',
                  msg2:'这是另外一个消息',
                  msg3:'<strong>这是一个html<strong>'
                }
            })
        </script>
    </html>

页面效果：

![20210310184037815.png][]

# 总结 #

v-text和\{ \{\}\}表达式渲染数据，不解析标签，如果有标签则直接当做字符输出到页面上。

v-html不仅可以渲染数据，而且可以解析标签。

[2021031018325217.png]: /images/20210724/da538ee969bf4e679f31512cc2152eae.png
[20210310183709313.png]: /images/20210724/82d3a465d4f24d558b8fd1eec4cbce97.png
[20210310184037815.png]: /images/20210724/87f45450dedf4777ac21de995bc4159a.png