zoukankan      html  css  js  c++  java
  • Vue的插值语法

    1、mustache语法

    <div id="app">
      {{message}} vue
      <br>
      {{firstName + ' ' + lastName}}
      <br>
      {{firstName}} {{lastName}}
      <br>
      {{counter * 2}}
    </div>



    2、v-once

    当希望插值表达式中的内容仅渲染一次时......

    <div id="app">
      <h2>{{message}}</h2>
      <!--v-on : 该指令修饰的元素和组件只渲染一次,不会随着数据的改变而改变  -->
      <h2 v-once> {{message}}</h2>
    </div>


    3、v-html

    当需要渲染的数据是一段 html 文本时

    <div id="app">
      <h2 v-html="url"></h2>
    </div>
    
    const app = new Vue({
      el: "#app", //用于挂载要管理的元素
      data: {   //定义数据
        url: '<a href="http://www.baidu.com">百度一下</a>'
      }
    })


    4、v-text

    和 mustache语法一致.....

    只不过mustache语法会进行拼接,而 v-text 会进行替换

    <div id="app">
      <h2>{{message}},houchen</h2>
      <h2 v-text="message">,houchen</h2> <!--v-text中的内容会将vue覆盖-->
    </div>

    clipboard


    5、v-pre

    不对 mustache语法进行解析 ......

    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-pre>{{message}}</h2>   <!-- 显示{{message}},不对插值表达式进行解析 -->
    </div>

    image


    6、v-cloak

    当vue正在渲染页面时,不显示 {{message}}

    <div id="app">
      <h2 v-cloak>{{message}}</h2>
    </div>
  • 相关阅读:
    SQLAlchemy Table(表)类方式
    MySQL简单入门
    第四次作业
    第三次随笔
    第二次随笔
    第一次随笔
    第四次随笔
    第三次作业
    第二次随笔
    第一次随笔
  • 原文地址:https://www.cnblogs.com/houchen/p/14387173.html
Copyright © 2011-2022 走看看