zoukankan      html  css  js  c++  java
  • vuejs {{}},v-text 和 v-html的区别

    <div id="app">
      <p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->
      <p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->
      <p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
    </div>


    <script>
      let app = new Vue({
      el: "#app",
      data: {
        message: "<span>通过双括号绑定</span>",
        html: "<span>html标签在渲染的时候被解析</span>",
        text: "<span>html标签在渲染的时候被源码输出</span>",
      }
    });
    </script>


    区别:
    {{message}}:将数据解析为纯文本,不能输出真正的html,在页面加载时显示{{}},所以通常使用v-html和v-text代替,且花括号方式在以后可能被取消

    v-html="html":输出真正的html

    v-text="text":将数据解析为纯文本,不能输出真正的html,与花括号的区别是在页面加载时不显示{{}}

     
     
  • 相关阅读:
    Yslow-23条规则
    ASP.Net MVC多语言
    Java笔记--反射机制
    Java笔记--常用类
    Java笔记--多线程
    Java--IO流
    Java笔记--枚举&注解
    Java笔记--泛型
    Java笔记--异常
    Java笔记--集合
  • 原文地址:https://www.cnblogs.com/jinbang/p/6790592.html
Copyright © 2011-2022 走看看