学堂 学堂 学堂公众号手机端

v-html和v-text的指令用处是什么,如何使用

lewis 1年前 (2024-04-28) 阅读数 21 #技术
这篇文章主要介绍“v-html和v-text的指令用处是什么,如何使用”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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:"<h2>hello vue</h2>"

            }

        })

 </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:"<h2>hello vue</h2>"

            }

        }) 

 </script>

输出结果为:


以上就是关于“v-html和v-text的指令用处是什么,如何使用”的介绍了,感谢各位的阅读,如果大家想要了解更多相关的内容,欢迎关注博信,小编每天都会为大家更新不同的知识。
版权声明

本文仅代表作者观点,不代表博信信息网立场。

热门