基于Vue Computed Watch Filter知识点小案例：购物车

计算属性Computed

• 计算属性：相当于可以完成代码计算的变量。（自动更新，并返回计算结果）
• 编写步骤：- 步骤1：声明计算属性：（编写逻辑代码），在computed中声明

  computed: {
    //属性名() { return 返回值 }
    total() {
      return 0
    }
  },

步骤2：使用计算属性：与普通变量相同的

{{total}}

案例：将字符串反转（倒排），“ABC” --> "CBA"

<template>
  <div>
    <!-- 
      split：字符串函数,将字符串按照指定的字符分割成数组
      reverse：数组函数，将数组数据反转
      join：数组函数，将数组按照指定的字符拼接成字符串
     -->
    {{'ABC'.split('').reverse().join('')}}

    {{msg}}
  </div>
</template>

<script>
export default {
  computed: { //计算属性：可以实时进行计算的变量
    msg() {
      return 'XYZ'.split('').reverse().join('')
    }
  },
}
</script>

<style>

</style>

案例2：data、methods、computed对比，‘显示姓名，2个文本框，一个是姓，一个是名’

<template>
  <div>
    <!-- 1.1 2个input -->
    <input type="text" v-model="firstName">
    <input type="text" v-model="secondName">

    <!-- 2.2 触发函数 -->
    <input type="button" value="显示" @click="exeName"> <br>
    fullName : {{fullName}} <br>
    <!-- 3.2 显示结果 -->
    fullName2 :     {{fullName2}} <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.2 两个变量 + 1个变量
      firstName: '',
      secondName: '',
      fullName: ''
    }
  },
  methods: {
    // 2.1 声明函数
    exeName() {
      this.fullName = this.firstName + this.secondName
    }
  },
  computed: {
    // 3.1 声明计算属性
    fullName2() {
      // 格式：姓为'张',名为'三',全称为'张三'
      return this.firstName + this.secondName
    }
  },
}
</script>

<style>

</style>

过滤器

• 过滤器：是对已有数据的二次加工

语法

语法1：无参

• 声明过滤器 (data/methods平级)

filter: {   
  过滤器名称(已有数据) {        
  return 处理结果    
}}

• 使用过滤器

{{变量 | 过滤器}}

语法2：有参

• 声明过滤器 (data/methods平级)

filter: {
    过滤器名称(已有数据, 变量1,变量2,... ) {
        return 处理结果
    }
}

使用过滤器

{{变量 | 过滤器(参数1,参数2,...) }}

案例

案例1：固定2位小数位数

<template>
  <div>
      {{num | parseNum }}
  </div>
</template>

<script>
export default {
    data() {
        return {
            num: 123.456
        }
    },
    filters: {
        parseNum( value ) {
            // 数字保留2位小数
            //  Number(内容) ：将指定内容转换数字
            //  toFixed：数字对象函数，按照四舍五入，截取小数位数
            return Number(value).toFixed(2)
        }
    }
}
</script>

<style>

</style>

案例2：指定小数位数

<template>
  <div>
      {{num | parseNum(1) }}
  </div>
</template>

<script>
export default {
    data() {
        return {
            num: 123.456
        }
    },
    filters: {
        parseNum( value, n ) {
            // 数字保留2位小数
            //  Number(内容) ：将指定内容转换数字
            //  toFixed：数字对象函数，按照四舍五入，截取小数位数
            return Number(value).toFixed(n)
        }
    }
}
</script>

<style>

</style>

监听器

• 监听器：当数据发生改变时，监听器可以出发对应的事件。

语法

语法1：对普通变量进行监听

data() {
    return {
        变量：1
    }
},
watch: {
    变量() {        //data.变量的监听处理函数
        
    }
}

语法2：深度监听

data() {
    return {
        对象变量：{
            属性1: 值,
            属性2: 值,
        }
    }
},
watch: {
    对象变量: {
        handler() {},   //处理函数
        deep: true        //深度监听，属性值发生变化时，也可以监听
    }
}

案例

• 监听普通变量和对象变量

<template>
  <div>
      msg: <input type="text" v-model="msg"> <br>
      username: <input type="text" v-model="user.username">
  </div>
</template>

<script>
export default {
    data() {
        return {
            msg: '',        //普通变量
            user: {            //对象遍历
                username: ''
            }
        }
    },
    watch: {
        msg(val, oldValue) {     //普通变量的监听处理函数
            console.info(`msg : 新值${val} ,旧值${oldValue}`)
        },
        user: {
            handler(val, oldValue) {
                console.info(`user : 新值${val.username} ,旧值${oldValue.username}`)
            },
            deep: true          //深度监听
        }
    },  
}
</script>

<style>

</style>

案例：购物车

需求

实现

• 步骤：- 步骤1：页面显示（Cart.vue、路由、路径 /cart）- 步骤2：展示数据（模拟商品list、v-for展示）、（复选框、价格、时间、总价）

<template>
  <div>
    <table border="1">
      <tr>
        <td>
          <input type="checkbox" name="" id="">
        </td>
        <td>编号</td>
        <td>标题</td>
        <td>价格</td>
        <td>数量</td>
        <td>日期</td>
        <td>小计</td>
      </tr>
      <tr v-for="(product,index) in productList" :key="index">
        <td>
          <input type="checkbox" name="" id="">
        </td>
        <td>{{product.pid}}</td>
        <td>{{product.title}}</td>
        <td>{{product.price}}</td>
        <td>
          <a href="" @click.prevent="product.count--">-</a>
          {{product.count}}
          <a href="" @click.prevent="product.count++">+</a>
        </td>
        <td>{{product.createDate}}</td>
        <td>
          <!-- 小计：单价 * 数量 -->
          {{product.price * product.count}}
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>总计：</td>
        <td>
          <!-- 总计：所有小计的和 -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [  //模拟商品数据
        {
          pid: 'p001',
          title: '衣服',
          price: '998.45',
          count: '9',      //购买数量
          createDate: '2022-03-07 11:28:45'
        },
        {
          pid: 'p002',
          title: '电脑',
          price: '9768.76',
          count: '10',      //购买数量
          createDate: '2022-03-07 11:28:45'
        }
      ]
    }
  },
}
</script>

<style>

</style>

案例：计算总计

  computed: {
    //属性名() { return 返回值 }
    total() {
      let sum = 0 ;
      this.productList.forEach(product => {
        // 小计的和
        sum += (product.price * product.count)
      });
      return sum
    }
  },