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

简介: 基于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:指定小数位数

1.<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    //深度监听,属性值发生变化时,也可以监听
    }
}

案例


  • 监听普通变量和对象变量
1.<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>

案例:购物车


需求


微信图片_20220525215158.png

实现


  • 步骤:
  • 步骤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
    }
  },


相关文章
|
22天前
|
缓存 JavaScript 数据处理
vue computed作用特点及使用场景及示例
vue computed作用特点及使用场景及示例
17 3
|
18天前
|
JavaScript API
vue3【实用教程】侦听器 watch,自动侦听 watchEffect(),$watch,手动停止侦听器
vue3【实用教程】侦听器 watch,自动侦听 watchEffect(),$watch,手动停止侦听器
25 0
|
22天前
|
JavaScript
Vue computed自动计算对象中的属性
Vue computed自动计算对象中的属性
15 0
|
2月前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
23 0
|
2月前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
JavaScript
Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 &lt;input v-model="newItem(key,val)" type="text"/&gt; computed:{ newIt...
3008 0
|
3天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
12天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6