0


基于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
    }
  },
标签: vue.js

本文转载自: https://blog.csdn.net/weixin_45481821/article/details/123358606
版权归原作者 陶然同学。 所有, 如有侵权,请联系我们删除。

“基于Vue Computed Watch Filter知识点小案例:购物车”的评论:

还没有评论