美文网首页
Vue中文本输出的三种方法{{}}、v-html、v-text

Vue中文本输出的三种方法{{}}、v-html、v-text

作者: zoomlaCMS | 来源:发表于2020-02-17 07:42 被阅读0次

    {{ }}

    使用{{}}将元素当成纯文本输出,如:
    {{Title}}
    实现将Title字段的数据输出

    v-html

    v-html会将元素当成HTML标签解析后输出

    v-text

    v-text会将元素当成纯文本输出

    代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Vue文本渲染三种方法</title>
    </head>
    <body>
        <div id="app">
             <!--   {}}/v-text不能解析html元素,只会照样输出 -->
             <p>{{hello}}</p>
            <p v-text = 'hello'></p>
            <p v-html = 'hello'></p>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                hello:'<span>hello world</span>'
            }
        })
    </script>
    </html>
    

    运行结果:


    三种输出结果展示

    相关文章

      网友评论

          本文标题:Vue中文本输出的三种方法{{}}、v-html、v-text

          本文链接:https://www.haomeiwen.com/subject/zbmwfhtx.html