vue指令——插值表达式{{}}

基本使用

vue中,使用{{}}双花括号,在html标签的“内容区域”中表现数据,这个技术称为插值表达式

语法

<标签> {{ 表达式 }} </标签>

<div>
    {{ city }}
</div>

表达式:变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。

在JavaScript中,有返回实在信息的是表达式,没有返回实在信息(undefined)的是语句。

使用示例

<div id="app">
    <p>{{ msg }}</p>						  <!--变量-->
    <p>{{ 500 }}</p>  					  <!--常量-->
    <p>{{ score + 10 }}</p> 				   <!--算术运算-->
    <p>{{ score > 10 }}</p> 				   <!--比较运算-->
    <p>{{ score > 80 && age > 18 }}</p>  	    <!--逻辑运算-->
    <p>{{ age > 18 ? '成年' : '少年' }}</p>    <!--三元运算-->
</div>

<script src="./vue.js"></script>

<script>
    var vm = new Vue({
        // delimiters:['$','#'],
        el:'#app',
        data:{
            msg:'数据',
            score: 90,
            age:20
        }
    })
</script>

如果{{}}使用中有冲突,想更换为其他标记,可以这样:

delimiters:['${''}$']  // 标记符号变为${  }$

注意

  1. 在插值表达式中,只能设置简单的javascript表达式,不能设置复杂的表达式(例如for循环)。
  2. 在data值大小不改变的前提下,可以进行一般的 算术运算、比较运算、逻辑运算、三元操作符等运算使用,也可以通过常量进行数据体现。
  3. 插值表达式只能用在html标签的内容区域,不能用在其他地方。
  4. {{}}花括号与变量之间为了美观,通常表达式左右各一个空格。

插值表达式-闪烁及解决

插值表达式使用时,页面加载时出现会闪烁问题。

  • v-text与插值表达式 {{}} 都可以操控标签内容区域,但是他们有区别:
    • 网速非常慢时,{{}}插值表达式有闪烁问题,而 v-text没有(属性本身是不会显示出来的)。
    • 网速非常慢时,{{ }}花括号等原生内容在 Vue编译期间会在浏览器中短时显示。
    • 在这里插入图片描述

解决方法:v-cloak

v-cloak

v-cloak 可以隐藏未编译的 Mustache 标签直到vue实例编译结束。

<style type="text/css">
/* 通过属性选择器,选择到带有属性 v-cloak 的标签让其隐藏*/
[v-cloak]{
    /* 元素隐藏 */
    display: none;
}
</style>
<div id="app">
    <!-- 给带有插值表达式语法的标签添加 v-cloak 属性,在数据渲染完成之后,v-cloak属性会被自动去除,
         v-cloak一旦移除就没有这个属性了,属性选择器就选择不到该标签,对应的标签会变为可见。-->
    <div  v-cloak >{{msg}}</div>
</div>
Logo

前往低代码交流专区

更多推荐