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 ) 购物车案例

带给我们的收获

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、插值

1.1 讲述

1.2 实例

二、指令

2.1 概述

2.2 案例

三、过滤器

3.1 讲述

3.2 实例

四、计算属性&监听属性

( 1 ) 计算属性

( 2 ) 监听属性

( 3 ) 购物车案例

带给我们的收获

热门文章

最新文章

相关课程

相关电子书

相关实验场景