Vue的插值、指令、过滤器、计算属性及监听属性，包涵所有基础技术-阿里云开发者社区

一、插值

1.1 讲述

Vue的插值是一种将数据动态绑定到HTML模板中的方式。通过插值，可以将Vue实例中的数据直接显示在HTML模板中，实现数据与视图的同步更新。

Vue的插值使用双大括号{{}}来表示，可以在HTML标签的属性值和文本内容中使用。在插值中，可以使用Vue实例中的数据属性、计算属性和方法，也可以使用JavaScript表达式。

插值的作用包括但不限于以下几个方面：

1. 数据绑定：通过插值，可以将Vue实例中的数据与HTML模板进行绑定，实现数据的自动更新。当数据发生变化时，插值会自动更新对应的HTML内容，使页面保持最新的状态。

2. 动态文本：通过插值，可以将动态的文本内容显示在HTML模板中。可以使用插值来显示用户输入的数据、数据库中的数据或者通过API获取的数据等。

3. 表达式计算：插值中可以使用JavaScript表达式，可以进行一些简单的计算和逻辑判断。可以通过插值来实现动态的样式计算、条件渲染和数据过滤等。

4. 数据格式化：可以在插值中使用过滤器来格式化数据，例如日期格式化、数字格式化和文本截断等。通过插值和过滤器的组合，可以方便地处理各种数据的展示需求

总之，Vue的插值是一种方便而强大的数据绑定方式，可以将Vue实例中的数据动态地显示在HTML模板中，实现数据与视图的同步更新。通过插值，可以实现动态文本、表达式计算和数据格式化等功能。

1.2 实例

流程 :

Vue的插值流程如下：

1. 解析模板：在Vue应用程序中，首先会解析模板，将模板转换为虚拟DOM（Virtual DOM）树。模板可以是HTML字符串，也可以是在Vue实例中定义的template选项。

2. 创建Vue实例：在解析模板之后，会创建Vue实例。Vue实例是Vue应用程序的入口，用于管理数据和处理视图。

3. 数据绑定：在创建Vue实例时，会建立数据与视图的双向绑定关系。Vue会遍历虚拟DOM树，查找其中的插值表达式，然后将这些表达式与Vue实例中的数据属性建立绑定关系。

4. 数据更新：一旦数据发生变化，Vue会自动更新与之相关的插值表达式。Vue会使用响应式系统来检测数据的变化，并触发相应的更新操作。

5. 更新视图：当数据更新时，Vue会重新渲染虚拟DOM树，并比较新旧虚拟DOM树的差异。然后，Vue会将差异应用到实际的DOM树上，更新视图。

6. 渲染HTML：最后，Vue会将更新后的DOM树渲染到浏览器中，展示给用户。

总结起来，Vue的插值流程包括解析模板、创建Vue实例、建立数据绑定关系、数据更新、更新视图和渲染HTML。通过这个流程，Vue实现了数据与视图的同步更新，使得页面能够动态地显示数据的变化。通过插值，开发者可以方便地将Vue实例中的数据动态地显示在HTML模板中，实现数据驱动的视图更新。

演示 :

创建一个HTML文件，编写以下代码 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>插值</title>
    <style>
      .f20{
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 定义边界 -->
        <div id="app">
          <h1>文本:</h1>
          <h3>{{msg}}</h3>
          <h1>html串:</h1>
          <div v-html="string"></div>
          <h1>vue中的属性:</h1>
          <!-- 所有原生态的属性，要利用vue的变量，都需要写对应的属性v-html或:class -->
          <div v-html="string" :class="stringf20"></div>
          <h1>表达式:</h1>
          ikun:{{number+1}}<br/>
          {{str.substring(0,4)}}<br/>
          <input v-model="ok"/>
          {{ok ? '今晚足浴' : '今晚按摩'}}<br/>
        </div>
    <script type="text/javascript">
        // 构建vue实例并绑定边界
        new Vue({
          el: '#app',
          data() {
            return {
              msg: '披坚执锐',
              string:'<h3 style="color:blue;">披坚执锐，百战当先</h3>',
              stringf20:'f20',
              number:59,
              str:'我爱洗澡，皮肤好好',
              ok:false,
            };
          }
        })
      </script>
  </body>
</html>

效果如图:

二、指令

2.1 概述

在Vue中，指令（Directive）是一种特殊的语法，用于在模板中对DOM元素进行操作和绑定数据。指令以`v-`开头，后面跟着指令的名称，例如`v-bind`、`v-model`等。指令可以直接应用在HTML标签上，通过指令可以改变DOM元素的属性、样式、事件等。

指令的作用包括但不限于以下几个方面：

1. 数据绑定：指令可以将Vue实例中的数据与DOM元素进行绑定，实现数据的动态更新。例如，`v-bind`指令可以将Vue实例中的数据绑定到DOM元素的属性上，实现属性的动态更新。

2. 条件渲染：指令可以根据条件来决定是否渲染DOM元素。例如，`v-if`指令可以根据条件来判断是否渲染DOM元素。

3. 列表渲染：指令可以根据数据的列表来渲染DOM元素。例如，`v-for`指令可以根据数据的列表来渲染多个DOM元素。

4. 事件绑定：指令可以将Vue实例中的方法绑定到DOM元素的事件上，实现事件的处理。例如，`v-on`指令可以将Vue实例中的方法绑定到DOM元素的点击事件上。

5. 样式绑定：指令可以根据条件来动态修改DOM元素的样式。例如，`v-bind:class`指令可以根据条件来动态添加或移除DOM元素的类名。

6. 表单输入绑定：指令可以将表单元素与Vue实例中的数据进行双向绑定。例如，`v-model`指令可以将表单元素的值与Vue实例中的数据进行双向绑定。

通过指令，开发者可以方便地操作DOM元素和绑定数据，实现动态的页面效果和交互。指令是Vue中非常重要的一部分，是实现数据驱动视图的关键。同时，Vue也提供了一些内置的指令，开发者也可以自定义指令来满足特定的需求。

2.2 案例

流程

Vue的指令流程主要包括以下几个步骤：

1. 解析模板：在Vue应用中，首先需要解析HTML模板。Vue会遍历模板中的所有元素和属性，查找其中的指令。指令以`v-`开头，例如`v-bind`、`v-if`等。

2. 创建Vue实例：在解析模板的过程中，Vue会创建一个Vue实例，该实例将负责管理数据和处理视图。Vue实例会与模板中的元素和指令建立关联。

3. 建立数据绑定关系：当Vue实例创建完成后，会根据指令建立数据与视图的双向绑定关系。Vue会遍历模板中的指令，将指令与Vue实例中的数据属性进行绑定。例如，`v-bind`指令可以将Vue实例中的数据绑定到DOM元素的属性上。

4. 数据更新：一旦数据发生变化，Vue会使用响应式系统检测数据的变化，并触发相应的更新操作。Vue会自动更新与之相关的插值表达式和指令，保持数据和视图的同步。

5. 更新视图：当数据更新时，Vue会重新渲染虚拟DOM树，并比较新旧虚拟DOM树的差异。然后，Vue会将差异应用到实际的DOM树上，更新视图。这个过程是高效的，只会更新实际发生变化的部分，而不会重新渲染整个DOM树。

6. 渲染HTML：最后，Vue会将更新后的DOM树渲染到浏览器中，展示给用户。用户可以看到数据的变化和视图的更新。

通过这个流程，Vue实现了数据与视图的同步更新，使得页面能够动态地显示数据的变化。指令在其中起到了关键的作用，通过指令可以将数据绑定到DOM元素上，实现数据的动态更新、条件渲染、列表渲染、事件绑定等功能。

演示

创建一个HTML文件，编写以下代码 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>指令</title>
  </head>
  <body>
    <!-- 定义边界 -->
        <div id="app">
              <h1>v-if|v-else|v-else-if:</h1>
              分数：<input v-model="score" />
              <div v-if="score>80">打蓝球</div>
              <div v-else-if="score>60">踢足球</div>
              <div v-else="score<60">练习两年半</div>
              <h1>v-show：</h1>
              <div v-show="score>90">v-show-蓝球练习两年半</div>
              <div v-if="score>90">v-if-蓝球练习两年半</div>
              <h1>v-for:</h1>
              <span v-for="a in arr" >{{a}}&nbsp;&nbsp;</span><br />
              <select v-model="selected">
                <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
              </select>
              <div v-for="h in hobby">
              <input :value="h.id" type=checkbox />{{h.name}}
              </div>
              <h1>动态参数</h1>
              <input v-model="evname"/>
              <button  v-on:[evname]="te">别点</button>
            </div>
          </body>
          <script type="text/javascript">
            // 构建vue实例并绑定边界
            new Vue({
              el: '#app',
              data() {
                return {
                  score:78,
                  arr:['a','b','c','d'],
                  hobby:[
                    {id:"1",name:"独孤"},
                    {id:"2",name:"葵花"},
                    {id:"3",name:"学典"}
                  ],
                  selected:3,
                  evname:"click"
                };
              },
              methods:{
                te(){
                  alert("凉凉")
                }
              }
            })
          </script>
        </html>

效果如图 :

三、过滤器

3.1 讲述

在Vue中，过滤器（Filters）是一种用于格式化文本或数据的功能。它们可以在双花括号插值和`v-bind`表达式中使用，以对输出进行一些简单的转换。

过滤器可以用于以下几个方面：

1. 文本格式化：过滤器可以将文本进行格式化，例如将文本转换为大写或小写，格式化日期等。

2. 数据处理：过滤器可以对数据进行处理，例如对数字进行四舍五入、保留小数位数等。

3. 条件渲染：过滤器可以根据条件来渲染文本或数据，例如根据条件显示不同的文本或数据。

4. 数据排序：过滤器可以对数据进行排序，例如对列表数据按照特定的条件进行排序。

Vue中内置了一些常用的过滤器，例如`uppercase`、`lowercase`、`currency`、`date`等。同时，Vue还支持自定义过滤器，开发者可以根据自己的需求定义自己的过滤器。

使用过滤器的语法是在插值表达式或`v-bind`表达式中使用管道符（`|`）将过滤器名称添加到表达式中，例如`{{ message | uppercase }}`。可以使用多个过滤器，它们会按照从左到右的顺序进行链式调用，例如`{{ message | uppercase | lowercase }}`。

过滤器提供了一种简单而灵活的方式来处理和格式化数据，使得页面输出更加清晰和易读。

3.2 实例

流程

使用过滤器的流程如下：

--1. 注册过滤器：在Vue实例创建之前，可以使用全局方法`Vue.filter`来注册过滤器。也可以在组件的选项中使用`filters`属性来注册局部过滤器。

--2. 使用过滤器：在模板中使用过滤器时，可以在插值表达式或`v-bind`表达式中使用管道符（`|`）将过滤器名称添加到表达式中。可以使用多个过滤器，它们会按照从左到右的顺序进行链式调用。

--3. 定义过滤器：过滤器可以是全局过滤器或局部过滤器。全局过滤器在注册时指定名称和处理函数，而局部过滤器可以在组件的选项中定义。

--4. 运行过滤器：当模板中使用过滤器时，Vue会自动调用过滤器函数，并将表达式的值作为参数传递给过滤器函数。过滤器函数可以对参数进行处理，并返回处理后的结果。

--5. 渲染结果：Vue会将过滤器函数返回的结果插入到模板中，并最终渲染到页面上。

需要注意的是，过滤器是一种纯函数，它不会修改原始数据，而是返回一个新的值。因此，在使用过滤器时，应该将过滤器的结果赋值给一个变量，而不是直接修改原始数据。

另外，过滤器可以接收额外的参数，可以在使用过滤器时通过冒号（`:`）指定参数。例如，`{{ message | uppercase('param') }}`，其中`'param'`是传递给过滤器的额外参数。

总的来说，使用过滤器的流程包括注册过滤器、使用过滤器、定义过滤器、运行过滤器和渲染结果。通过使用过滤器，可以对文本或数据进行格式化和处理，使得页面输出更加清晰和易读。

演示

创建HTML文件，编写以下代码 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="js/date.js"></script>
    <title>过滤器</title>
  </head>
  <body>
       <!-- 定义边界 -->
        <div id="app">
          <h3>局部过滤器</h3>
          没过滤:{{mag}}<br />
          已过滤:{{mag | filter1}}
          <h3>局部过滤器串行</h3>
          没过滤: {{mag}}<br />
          已过滤: {{mag | filter1 }}<br />
          串行过滤: {{mag | filter1 | filter2(3,5)}}
          <h3>全局过滤器</h3>
          {{time}}<br />
          {{time | filterDate}}
        </div>
        <script type="text/javascript">
          Vue.filter('filterDate',function(value){
            return fmtDate(value);
          });
          // 构建vue实例并绑定边界
          new Vue({
            el: '#app',
            data() {
              return {
                mag:'我爱洗澡，皮肤好好，我爱学习，天天向上',
                time: new Date()
              };
            },filters:{
                'filter1':function(val){
               return val.substring(2,9);
                 },
                 'filter2':function(val,start,end){
                 return val.substring(start,end);
                }
                }
          })
        </script>
  </body>
</html>

效果如图 :

四、计算属性&监听属性

( 1 ) 计算属性

1-1 介绍

在Vue中，计算属性（Computed Properties）是一种用于声明响应式依赖关系的属性。计算属性会根据它们的依赖进行缓存，并且只在相关依赖发生改变时才会重新计算。

计算属性的作用主要有以下几个方面：

1. 数据处理：计算属性可以对原始数据进行处理，返回一个新的计算结果。例如，可以将字符串转换为大写或小写，对数字进行四舍五入等。

2. 数据过滤：计算属性可以根据条件对数据进行过滤，只返回符合条件的数据。例如，可以根据条件筛选出某个列表中的特定项。

3. 数据关联：计算属性可以根据多个数据的关联关系进行计算，并返回一个新的计算结果。例如，可以根据用户的输入计算出一个表单字段的合法性或相关性。

4. 数据缓存：计算属性会根据它们的依赖进行缓存，只在相关依赖发生改变时才会重新计算。这样可以避免不必要的计算，提高性能。

计算属性的使用方式是在Vue实例的`computed`选项中声明计算属性的名称和对应的计算函数。计算函数会在计算属性被访问时自动调用，并返回计算结果。计算属性可以像普通属性一样在模板中使用，而不需要调用函数。

需要注意的是，计算属性是基于它们的依赖进行缓存的。只有当依赖发生改变时，计算属性才会重新计算。如果计算属性的依赖不会发生改变，那么每次访问计算属性时都会返回缓存的结果，而不会重新计算。这样可以提高性能，避免不必要的计算。

总的来说，计算属性是一种方便而强大的特性，可以帮助我们处理和计算数据，使得代码更加简洁和易读。

1-2 演示

创建HTML文件，编写以下代码 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算属性&监听属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <!-- 只是单方面的监听计算 -->
      <h3>计算属性</h3>
      单价:<input v-model="dj"/>
      数量:<input v-model="sl"/>
      总计:{{count}}
      <h3>监听器</h3>
      <!-- 这里是双方面的监听计算 -->
      千米：<input v-model="km" />
      米：<input v-model="m" />
    </div>
    <script type="text/javascript">
      // 构建vue实例并绑定边界
      new Vue({
        el: '#app',
        //定义属性
        data() {
          return {
            sl:80,
            dj: 1,
            km:1,
            m:1000
          };
        },
        computed:{
          count:function(){
            return this.dj * this.sl;
          }
        },
        watch:{
          //v为被监听属性，这里值m
          km:function(v){
           this.m = parseInt(v)*1000; 
          },//v为被监听属性，这里值km
          m:function(v){
           this.km = parseInt(v)/1000;
          }
        }
      })
      </script> 
  </body>
</html>

效果如图 :

( 2 ) 监听属性

2-1 讲述

在Vue中，可以使用`watch`选项来监听数据的变化。监听属性是一种用于在数据变化时执行特定操作的功能。

通过`watch`选项，可以指定要监听的数据和对应的回调函数。当被监听的数据发生变化时，Vue会自动调用回调函数，并将新值和旧值作为参数传递给回调函数。

监听属性的使用方式是在Vue实例的`watch`选项中声明要监听的属性和对应的回调函数。回调函数会在被监听的属性发生变化时自动调用，并传入新值和旧值。

监听属性的作用主要有以下几个方面：

1. 响应式数据的监控：通过监听属性，可以实时监控数据的变化，从而做出相应的操作。例如，可以在数据变化时更新页面的显示内容。

2. 异步操作的触发：监听属性可以用于在数据变化时触发异步操作，例如发送网络请求、更新其他数据等。通过监听属性，可以在数据变化后立即执行相应的操作。

3. 数据验证和处理：监听属性可以用于对数据进行验证和处理。例如，可以监听输入框的值，当输入框的值发生变化时，可以对输入的内容进行验证，判断是否符合要求。

4. 数据的联动更新：监听属性可以用于实现数据的联动更新。例如，可以监听一个对象的属性，当属性的值发生变化时，可以更新其他相关的属性或数据。

总的来说，监听属性是一种用于在数据变化时执行特定操作的功能。通过使用监听属性，可以对数据的变化进行实时监控，并在数据发生变化时执行相应的操作，从而实现更加灵活和精确的响应式行为。

2-2 演示

效果如图 :

( 3 ) 购物车案例

首先创建一个购物车的html文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>购物车-计算属性&监听属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <link href="css/myCart.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <!--定义边界 -->
    <div id="app">
        <div id="content">
         <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
         <form action="" method="post" name="myform">
          <tr>
            <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="myAll()" />全选</td>
            <td class="title_2" colspan="2">店铺宝贝</td>
            <td class="title_3">获积分</td>
            <td class="title_4">单价（元）</td>
            <td class="title_5">数量</td>
            <td class="title_6">小计（元）</td>
            <td class="title_7">操作</td>
          </tr>
          <tr>
            <td colspan="8" class="line"></td>
          </tr>
          <tr>
            <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
          </tr>
           <tr id="product1  ">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>
            <td class="cart_td_2"><img src="img/taobao_cart_01.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">日韩流行风时尚美眉米字拼图金属坡跟公主靴子黑色</a><br />
                颜色：棕色 尺码：37<br />
                保障：<img src="img/taobao_icon_01.jpg" alt="icon" /></td>
            <td class="cart_td_4">5</td>
            <td class="cart_td_5">{{boots}}</td>
            <td class="cart_td_6">
            <button @click="bootsadd">+</button>
            <input id="xz" type="text" v-model="bootssl"  class="num_input" /> 
            <button @click="bootsminus">-</button>
            <td class="cart_td_7">{{bootsxj}}</td>
            <td class="cart_td_8"><a href="javascript:deleteRow('product1')">删除</a></td>
          </tr>
          <tr>
            <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
          </tr>
           <tr id="product2">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
            <td class="cart_td_2"><img src="img/taobao_cart_02.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
                保障：<img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
            <td class="cart_td_4">12</td>
            <td class="cart_td_5">{{chanel}}</td>
            <td class="cart_td_6">
            <button @click="chaneladd">+</button>
            <input type="text" v-model="chanelsl"  class="num_input" />
            <button @click="chanelminus">-</button>
            </td>
            <td class="cart_td_7">{{chanelxj}}</td>
            <td class="cart_td_8"><a href="javascript:deleteRow('product2')">删除</a></td>
          </tr>
           <tr>
            <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
          </tr>
           <tr id="product3">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"  onclick="selectSingle()"/></td>
            <td class="cart_td_2"><img src="img/taobao_cart_03.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br />
                保障：<img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
            <td class="cart_td_4">3</td>
            <td class="cart_td_5">{{foundation}}</td>
            <td class="cart_td_6">
            <button @click="foundationadd">+</button>
            <input id="num_3" type="text" v-model="foundationsl"   class="num_input" />
            <button @click="foundationminus">-</button>
            </td>
            <td class="cart_td_7">{{foundationxj}}</td>
            <td class="cart_td_8"><a href="javascript:deleteRow('product3')">删除</a></td>
          </tr>
           <tr>
           <td  colspan="3"><a href="javascript:deleteSelectRow()"><img src="img/taobao_del.jpg" alt="delete"/></a></td>
            <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow">{{count}}</label> 元<br />
            可获积分 <label class="yellow" id="integral"></label> 点<br />
            <input name=" " type="image" src="img/taobao_subtn.jpg" /></td>
          </tr>
          </form>
        </table>
        </div>  
    </div>
    <script type="text/javascript">
    // 构建vue实例并绑定边界
    new Vue({
      el: '#app',
      //定义属性
      data() {
        return {
          boots:150,
          bootssl:1,
          chanel:230,
          chanelsl:1,
          foundation: 300,
          foundationsl:1
        };
      },
      methods:{
      //加的事件
        bootsadd(){
        this.bootssl=parseInt(this.bootssl)+1;
        },
      //减的事件
      bootsminus(){
      if(this.bootssl > 1){
        this.bootssl=parseInt(this.bootssl)-1;
        }
      },
      //加的事件
      chaneladd(){
        this.chanelsl=parseInt(this.chanelsl)+1;
      },
      //减的事件
      chanelminus(){
        if(this.chanelsl > 1){
          this.chanelsl=parseInt(this.chanelsl)-1;
        }
      },
      //加的事件
      foundationadd(){
        this.foundationsl=parseInt(this.foundationsl)+1;
      },
      //减的事件
      foundationminus(){
        if(this.foundationsl > 1){
        this.foundationsl=parseInt(this.foundationsl)-1;
        }
      }
      },
      computed:{
        bootsxj(){
          return this.boots * this.bootssl;
        },
        chanelxj(){
            return this.chanel * this.chanelsl;
        },
        foundationxj(){
            return this.foundation * this.foundationsl;
        },
        count:function(){
          return this.bootsxj + this.chanelxj + this.foundationxj;
        }
      }
    })
    </script>
  </body>
</html>

创建css样式资源，名为 : myCart.css

body{
  margin:0px;
  padding:0px;
  font-size:12px;
  line-height:20px;
  color:#333;
   }
ul,li,ol,h1,dl,dd{
  list-style:none;
  margin:0px;
  padding:0px;
  }
a{
  color:#1965b3;
    text-decoration: none;
  }    
a:hover{
  color:#CD590C;
  text-decoration:underline;
  }
img{
  border:0px;
  vertical-align:middle;
  }
#header{
  height:40px;
  margin:10px auto 10px auto;
  width:800px;
  clear:both;
  }
#nav{
  margin:10px auto 10px auto;
  width:800px;
  clear:both;
  }
#navlist{
  width:800px;
  margin:0px auto 0px auto;
  height:23px;
  }
  #navlist li{
    float:left;
    height:23px;
    line-height:26px;
  }
  .navlist_red_left{
    background-image:url(../img/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:-12px -92px;
    width:3px;
    }
  .navlist_red{
    background-color:#ff6600;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    width:130px;
    }
  .navlist_red_arrow{
    background-color:#ff6600;
    background-image:url(../img/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:13px;
    }
  .navlist_gray{
    background-color:#e4e4e4;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    width:150px;
    }
  .navlist_gray_arrow{
    background-color:#e4e4e4;
    background-image:url(../img/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:13px;
    }
  .navlist_gray_right{
    background-image:url(../img/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:-12px -138px;
    width:3px;
    }
#content{
  width:800px;
  margin:10px auto 5px auto;
  clear:both;
  }
  .title_1{
    text-align:center;
    width:50px;
    }
  .title_2{
    text-align:center;
    }
  .title_3{
    text-align:center;
    width:80px;
    }
  .title_4{
    text-align:center;
    width:80px;
    }
  .title_5{
    text-align:center;
    width:100px;
    }
  .title_6{
    text-align:center;
    width:120px;
    }
  .title_7{
    text-align:center;
    width:60px;
    }
  .line{
    background-color:#a7cbff;
    height:3px;
    }
  .shopInfo{
    padding-left:10px;
    height:35px;
    vertical-align:bottom;
    }
  .num_input{
    border:solid 1px #666;
    width:25px;
    height:15px;
    text-align:center;
    }
  .cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
    background-color:#e2f2ff;
    border-bottom:solid 1px #d1ecff;
    border-top:solid 1px #d1ecff;
    text-align:center;
    padding:5px;
    }
  .cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
    border-right:solid 1px #FFF;
    }
  .cart_td_3{
    text-align:left;
    }
  .cart_td_4{
    font-weight:bold;
    }
  .cart_td_7{
    font-weight:bold;
    color:#fe6400;
    font-size:14px;
    }
  .hand{
    cursor:pointer;
    }
.shopend{
  text-align:right;
  padding-right:10px;
  padding-bottom:10px;
  }
.yellow{
  font-weight:bold;
  color:#fe6400;
  font-size:18px;
  line-height:40px;
  }

演示效果 :

带给我们的收获

学习Vue的插值、指令、过滤器、计算属性及监听属性可以带来以下收获：

1. 理解Vue的模板语法：插值、指令、过滤器、计算属性及监听属性是Vue模板语法的重要组成部分。学习这些特性可以帮助我们更好地理解Vue的模板语法，从而更加熟练地使用Vue进行开发。

2. 提高开发效率：Vue的插值、指令、过滤器、计算属性及监听属性能够帮助我们更加高效地开发应用。例如，计算属性可以减少重复的代码，监听属性可以实时监控数据的变化，从而提高开发效率。

3. 优化应用性能：Vue的计算属性和监听属性可以帮助我们优化应用的性能。计算属性可以基于依赖进行缓存，避免不必要的计算，而监听属性可以实时监控数据的变化，从而避免不必要的重渲染。

4. 实现复杂的数据处理和展示：Vue的计算属性和过滤器可以帮助我们实现复杂的数据处理和展示。例如，可以使用计算属性将多个数据进行组合，使用过滤器对数据进行格式化。

总的来说，学习Vue的插值、指令、过滤器、计算属性及监听属性可以帮助我们更加熟练地使用Vue进行开发，并提高应用的性能和开发效率。

Vue的插值、指令、过滤器、计算属性及监听属性，包涵所有基础技术

一、插值

1.1 讲述

1.2 实例

二、指令

2.1 概述

2.2 案例

三、过滤器

3.1 讲述

3.2 实例

四、计算属性&监听属性

( 1 ) 计算属性

( 2 ) 监听属性

( 3 ) 购物车案例

带给我们的收获

热门文章

最新文章

相关课程

相关电子书

相关实验场景