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

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>