[JavaScript知识库]简易购物车

?

新手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>

?效果图:

?