简易购物车

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #python

学习笔记专栏收录该内容

31 篇文章

订阅专栏

这篇博客演示了在Vue.js中如何利用v-model和计算属性computed进行数据绑定和计算操作，以实现购物车的小程序。通过v-model.number修饰符确保输入为数字，并计算手机、电脑的子总价，以及运费、总金额、优惠和应付金额，展示了Vue.js在前端开发中的数据响应和计算能力。

新手vue中练习v-module与计算属性computed的小demo

这里也可以在插值表达式中直接运算结果但是个人提倡通过计算属性来对数据进行计算

v-module.后面的是修饰符有三个属性

.lazy并不是实时改变，而是在失去焦点或者按回车时才会更新
.number将输入转换成Number类型
.trim可以自动过滤输入首尾的空格
代码：

<template>
  <div id="app">
    <nav>
        <h2>案例:购物车结算</h2>
    </nav>
    <div class="main">
       <div class="main-item">
            <span>手机：价格</span>
            <input type="text" v-model.number="phoneNum">
            <span>数量</span>
            <input type="text" v-model.number="phoneCount">
            <span>小计 {{phoneSum}}元</span>
       </div>
        <div class="main-item">
            <span>电脑：价格</span>
            <input type="text" v-model.number="comNum">
            <span>数量</span>
            <input type="text" v-model.number="comCount">
            <span>小计 {{comSum}}元</span>
       </div>
       <div class="main-item">
            <span>运费：</span>
            <input type="text" v-model.number="fare">元
       </div>
       <div class="mian-item">
             共计:<span>{{getSum}}</span>元 <br>
             优惠:<span>{{disCount}}</span>元 <br>
             应付:<span>{{price}}</span>元 <br>
       </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      phoneNum: 2989,
      phoneCount: 1,
      comNum: 6000,
      comCount: 1,
      fare: 10
    }
  },
  computed: {
    // 手机小计
    phoneSum () {
      return this.phoneNum * this.phoneCount
    },
    // 电脑小计
    comSum () {
      return this.comNum * this.comCount
    },
    // 总金额
    getSum () {
      return this.phoneSum + this.comSum + this.fare
    },
    // 优惠金额
    disCount () {
      return this.getSum > 8000 ? 200 : 100
    },
    // 应付金额
    price () {
      return this.getSum - this.disCount
    }
  }
}
</script>
 
<style scoped lang='less'>
 
nav{
   margin-left: 300px;
}
.main{
    margin-top: 20px;
    .main-item{
        margin-top: 20px;
    }
    span{
        margin: 0 5px;
    }
}
</style>

效果图: