Vue应用程序开发最新章节_刘海著

2.3 数据绑定

Vue.js的数据绑定是其重要特性之一。数据绑定就是将页面的数据和视图关联起来，当数据发生变化的时候，视图可以自动更新。数据绑定的形式有很多种，下面分别来进行学习。

1.插值

插值是最简单、最常用的数据绑定方法，通过使用{{}}来绑定数据。{{}}符号是Mustache的语法，代码如下。

<div id="app"> 
            {{content}} 
   </div> 
       <script src=" https:/cdn.bootcss.com/vue/2.6.10/vue.js "></script> 
        <script> 
             var app = new Vue({ 
                  el: '#app', 
                  data: { 
                       content: 'Vue 学习教程' 
                  } 
              }) 
        </script>

在上述代码中，{{content}}的值会被相应的数据对象（在Vue实例的data选项中定义的content属性的值）替换。当content的值发生变化的时候，文本值会随着content值的变化而自动更新。

2.表达式绑定

{{}}之中除了存放最基本的数据之外，还可以存放JavaScript表达式，代码如下。

<div id="app"> 
        {{number/100}} 
       {{completed ? '完成' : '未完成'}} 
      {{text.split('.).reverse().join(".")}} 
    </div> 
      <script src=" https:/cdn.bootcss.com/vue/2.6.10/vue.js "></script> 
      <script> 
                var app = new Vue({ 
                     el: '#app', 
                     data: { 
                           number: 200, 
                           completed: false, 
                           text: 'abc.123' 
                     } 
                }) 
      </script>

在上述代码中，“{{completed?'完成':'未完成'}}”的插值采用的是三目表达式，当completed的值为true时，显示“完成”。这里data选项中的值是false，所以显示“未完成”。表达式绑定实例的效果如图2-11所示。

图2-11 表达式绑定实例的效果

提示存放在{{}}中的只能是JavaScript表达式，不能是JavaScript语句。所以，“{{ var name = 'xiaoli' }}”的写法是错误的。

3.双向数据绑定

简单来说，双向数据绑定就是当数据发生变化时，相应的视图会进行更新。当视图更新时，数据也会跟着变化，这样开发者就不必去操作DOM对象了。双向数据绑定在Vue.js中的简便实现方法就是直接使用v-model指令，代码如下。

<div id="app"> 
             <p>input 元素：</p> 
             <input v-model="message" placeholder="请输入……"> 
             <p>消息是: {{ message }}</p> 
</div> 
         <script> 
              new Vue({ 
                   el: '#app', 
                   data: { 
                        message: 'hello', 
                   } 
              }) 
         </script>

在上述代码中，默认的数据message的值是hello，当用户在文本框中输入新的数据后，视图中{{message}}的值就会发生变化。双向数据绑定实例的效果如图2-12所示。

图2-12 双向数据绑定实例的效果

提示此处提到的v-model指令的用法会在第3章中进行详细讲解。

4.过滤器

表达式后面可以添加过滤器，以“|”进行分隔。例如：

{{name|uppercase}}

过滤器的用法在第5章中会详细讲解。过滤器一般用于简单的文本转换，如果要实现更为复杂的数据变化，应该使用计算属性。