我是怎么学会vue的06:插值(mustache语法及其他插值指令)

白话前端

插值的意思就是把数据(值)插进dom里,数据定义在vue实例的data属性中。

1. 使用Mustache语法(即双大括号{{ }}

DOM:

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

vue实例的数据:

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    },
})

2. 其他的插值指令

(1)v-once

只显示第一次解析到的数据,当数据发生改变时,页面不跟着变。

<h2 v-once>{{message}}</h2>

(2)v-html

如果数据是一个HTML标签的字符串,使用v-html指令,把这个字符串解析成标签 显示到页面上。

data: {
    url:"<a href='http://www.baidu.com'>百度一下</a>"
}
<h2>{{url}}</h2>  <!--把a标签显示到页面上-->
<h2 v-html="url"></h2>    <!--把<a href='http://www.baidu.com'>百度一下</a>这个字符串显示到页面上-->

(3)v-text

把文本放到DOM上直接展示。

<h2>{{message}}</h2>
<h2 v-text="message"></h2>

这两种写法的效果是一样的。区别在于:v-text指令不够灵活,比如下面的演示:

<h2 v-text="message">张伟</h2>

message我们定义的是“你好啊”,这样写的话,“你好啊”会把“张伟”覆盖,只显示“你好啊”。

(4)v-pre

不做解析,直接显示原本的Mustache语法。

<h2 v-pre>{{message}}</h2>

(5)v-cloak

给HTML标签添加v-cloak属性后,vue解析标签的时候,如果没数据:保留v-cloak标签;如果有数据:删除v-cloak。

实现效果:配合css使用,可以做到有数据的时候显示标签,没数据的时候隐藏标签。

场景:程序实际的执行中,可能会有代码的卡顿或延迟,导致vue读取不到数据,当读取不到数据时,就会直接显示{{message}},当解析到数据时,又会把{{message}}修改成数据。这样就会造成页面显示的混乱。我们希望有数据的时候显示标签,没数据的时候隐藏标签。

用法如下:

<h2 v-cloak>{{message}}</h2>

数据部分,我们使用一个定时器,模拟程序的卡顿或延迟。

setTimeout(function(){
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好'
        }
    })
},1000)

这样写就实现了我们想要的效果:一开始没数据,v-cloak属性保留,显示{{message}},后面有数据了,显示你好,并删除了v-cloak属性。

最后,指定css效果:

<style>
    [v-cloak] {
      display: none;
    }
  </style>

v-cloak属性的时候,把这个标签隐藏,至此我们想要的效果就做好了。

阅读 1k

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏