vue指令v-html和v-text

245 阅读 0 评论 162 点赞

我是靠谱客的博主狂野金针菇，这篇文章主要介绍vue指令v-html和v-text，现在分享给大家，希望可以做个参考。

1、v-text 文本渲染指令

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>