• Vue学习之路第四篇:v-html指令


    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上:

    1、插值表达式

    2、v-text指令

    但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:<h1>这是一个h1元素内容</h1>。我们先用插值表达式和v-text尝试一下。

    <body>
        <div id="app">
            <p v-cloak>{{ msg }}</p>
            <p v-text="msg"></p>
        </div>
    
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    msg : "<h1>这是一个h1元素内容</h1>"
                }
            });
        </script>
    </body>

    运行结果,如下:

    结论:插值表达式和v-text指令被直接解析为了字符串元素。对此Vue提供了另外一个指令:v-html

        <div id="app">
            <p v-cloak>{{ msg }}</p>
            <p v-text="msg"></p>
            <p v-html="msg"></p>
        </div>
    
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    msg : "<h1>这是一个h1元素内容</h1>"
                }
            });
        </script>

    运行结果:

    成功的解析了标签属性。大家也可以尝试定义样式属性看看,如下:

    var vm = new Vue({
                el : "#app",
                data : {
                    msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"
                }
    });

    每天进步一点点!

  • 相关阅读:
    axios封装
    python 分析列表中的字典
    python 列表解析学习
    Java常用ORM框架
    Kafka 会不会丢消息?怎么处理的?
    Node.js学习笔记【八】
    Node.js学习笔记【七】
    Node.js学习笔记【六】
    Node.js学习笔记【五】
    Node.js学习笔记【四】
  • 原文地址:https://www.cnblogs.com/shibin90/p/10314112.html
Copyright © 2020-2023  润新知