vue指令v-html和v-text怎么用

这篇文章主要介绍了vue指令v-html和v-text怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

1、v-text 文本渲染指令

（只能渲染文本不能渲染标签）

<div id="test">

        <p v-text="message"></p>

 </div>

 <script src="./js/vue.js"></script>

 <script>
    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h3>hello vue</h3>"

            }

        })

 </script>

输出结果为：

2、 v-html

(可以渲染指令，可以渲染标签)

<div id="test">

        <p v-html="message"></p>

 </div>

 <script src="./js/vue.js"></script>

 <script>

    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h3>hello vue</h3>"

            }

        }) 

 </script>

输出结果为：

感谢你能够认真阅读完这篇文章，希望小编分享的“vue指令v-html和v-text怎么用”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注行业资讯频道，更多相关知识等着你来学习!