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>
  • 相关阅读:
    64位整数乘法
    HTML中常见问题汇总贴
    题解 牛客【「水」悠悠碧波】
    题解 CF1391B 【Fix You】
    四级-句子
    快速幂||取余运算
    最大子列和
    JvavScript中的函数与对象
    JavaScript中的流程控制语句
    冒泡排序,选择排序,插入排序,归并排序
  • 原文地址:https://www.cnblogs.com/houchen/p/14387173.html
Copyright © 2011-2022 走看看