V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wwwwzf
V2EX  ›  Vue.js

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

  •  
  •   wwwwzf ·
    zoomla · 2020-02-18 07:41:57 +08:00 · 3878 次点击
    这是一个创建于 1500 天前的主题,其中的信息可能已经有所发展或是发生改变。

    {{ }}

    使用{{}}将元素当成纯文本输出,如: {{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>
    

    运行结果: 三种输出结果展示

    6 条回复    2020-02-29 11:32:37 +08:00
    AngryPanda
        1
    AngryPanda  
       2020-02-18 08:33:38 +08:00 via Android
    没看到广告,有点失望😄
    LyleRockkk
        2
    LyleRockkk  
       2020-02-18 08:43:01 +08:00
    这是在记笔记吗?
    wunonglin
        3
    wunonglin  
       2020-02-18 10:18:18 +08:00
    拿 v2 当笔记本了么?
    anzu
        4
    anzu  
       2020-02-18 10:32:42 +08:00
    笔记请用本站记事本: https://www.v2ex.com/notes
    stupil
        5
    stupil  
       2020-02-28 21:13:02 +08:00
    还有 v-pre 啊。
    wwwwzf
        6
    wwwwzf  
    OP
       2020-02-29 11:32:37 +08:00
    @stupil tks
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2941 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 15:08 · PVG 23:08 · LAX 08:08 · JFK 11:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.