Vue.js的插值操作概述

 插值

1、文本

​        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
 

<div id="app1">
    <span>Message: {{ msg }}</span><!-- 显示在页面上：Message：这是一个Vue程序 -->
</div>
<script type="text/javascript">
    new Vue({
        el:'#app1',
        data:{
            msg:'这是一个Vue程序'
        }
    })
</script>

Mustache 标签 (双大括号) 将会被替代为对应数据对象data上的msg 的值。无论何时，绑定的数据对象上msg 发生了改变，插值处的内容都会更新。

2、原始HTML

​    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令：

<div id="app1">
    <p>{{ rawHtml }}</p>
    <p><span v-html="rawHtml"></span></p>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#app1',
        data:{
            rawHtml:'<span style="color: red">红色</span>'
        }
    })
</script>

结果如下：

​    这个 span 的内容将会被替换成为 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 `v-html` 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

 3、Attribute（属性）

Mustache 语法 (双大括号) 不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
 

<div id="app1">
    <div v-bind:id="div1"></div>
    <!-- 也可以简写 -->
    <div :id="div1"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#app1',
        data:{
            div1:'div1'
        }
    })
</script>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
 

<button v-bind:disabled="isButtonDisabled">Button</button>

如果isButtonDisabled的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

 4、使用JavaScript表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app1">
    {{ number + 1 }}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split(' ').reverse().join('--') }}

    <div v-bind:id="'list-' + id"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#app1',
        data:{
            number:1,
            ok:'123',
            message:'asd qwe',
            id:1
        }
    })
</script>

结果如下：

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}