一,插值操作

  • 这种语法叫做 Mustache 语法

    中文叫做胡子的意思,两个 {{}} 长的比较像胡子,所以这样命名了

    <body>
        <div id="app">
            <p>{{ message }}</p>					<!-- 直接在模板里面写 --> 
            <p>{{ message + ' ' + message }}</p>	 <!-- 进行字符串的 + 操作 --> 
            <p>{{ (num+10) * 2 }}</p>				<!-- 数字相乘 --> 
            <p>{{ message }} {{ message }}</p>		<!-- 两个插值 --> 
        </div>
        <script src="VueJs/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    num: 0
                }
            })
        </script>
    </body>
    
  • 涉及插值操作的指令
    1. v-once

      我们知道,在Vue里面,所有的数据都是响应式的,我们不想让某些数据发生改变,就需要用到这个指令

      添加该属性的DOM元素,该DOM元素内的**{{}}里面的值不会发生改变**

      <div id="app">
          <h2>{{message}}</h2>
          <h2 v-once>{{message}}</h2>
      </div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message: 'Hello Vue!',
              }
          })
      </script>
      

      在这里插入图片描述

    2. v-html

      有时候服务器给我们返回的不是数据二十一串html的字符串,我们想把他转换成DOM元素放到页面中

      <div id="app">
          <h2>{{ message1 }}</h2>		<!-- 显示错误 -->
          <h2 v-html="message2"></h2>	<!-- 显示成功 -->
      </div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message1: '<a href="https://www.baidu.com">百度</a>',
                  message2: '<a href="https://www.baidu.com">百度</a>',
              }
          })
      </script>
      

      在这里插入图片描述

    3. v-text

      把文本数据覆盖到DOM元素中,如果原先要填充的DOM元素中有另外的文本也会被覆盖

      在这里插入图片描述

      在这里插入图片描述

    4. v-pre

      不对 {{}} 里面的值进行解析,数据原封不动展现出来

      <div id="app">
          <h2>{{ message }}</h2>
          <h2 v-pre>{{ message }}</h2>
      </div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message: '你好呀',
              }
          })
      </script>
      

      在这里插入图片描述

    5. v-cloak

      有些情况下,浏览器可能还没有解析出我们编写的 ViewModel ,页面会直接显示处未渲染的 {{ data }}

      在这里插入图片描述

      使用该指令可以解决问题

      <style>
          [v-cloak] {
              display: none;
          }
      </style>
      
      <div id="app">
          <h2 v-cloak>{{ message }}</h2>		<!-- 等到数据渲染之后,v-vloak这个属性会消失 -->
      </div>
      
      <script>
          setTimeout(function() {
              var app = new Vue({
                  el: '#app',
                  data: {
                      message: 'Hello Vue'
                  },
              })
              }, 1000)
      </script>
      

      在这里插入图片描述

Logo

前往低代码交流专区

更多推荐