Vue实现购物车案例

最新推荐文章于 2024-06-11 12:41:07 发布

qyshskx

最新推荐文章于 2024-06-11 12:41:07 发布

阅读量461

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_42345596/article/details/105567072

版权

今天的小案例，用Vue实现购物车小案例，下面是代码以及效果图：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link  rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <div v-if="books.length">
<table>
  <thead>
  <tr>
    <th></th>
    <th>书名</th>
    <th>出版日期</th>
    <th>价格</th>
    <th>购买数量</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
    <tr v-for="(item,index) in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <td>{{item.price|showPrice}}</td>
      <td>
      //数量到1后减按钮不可使用
        <button @click="sub(index)" v-bind:disabled="item.count<=1">-</button>
        {{item.count}}
        <button @click="add(index)">+</button>
      </td>
      <td>
        <button @click="removeHandler">移除</button>
      </td>
    </tr>
  </tbody>
</table>
  <h3>totalPrice:{{totalPrice|showPrice}}</h3>
  </div>
  <h2 v-else>购物车为空！</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

style.css

table{
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
}
th{
  background-color: #f7f7f7;
  color: black;
  font-weight: 600;
}

const app = new Vue({
  el: '#app',
  data: {
    books:[
      {
        id:1,
        name:'Linux',
        date:'2020-02',
        price:100.00,
        count:1
      },
      {
        id:2,
        name:'Java',
        date:'2020-03',
        price:50.00,
        count:1
      },
      {
        id:3,
        name:'C++',
        date:'2000-02',
        price:10.00,
        count:1
      },
      {
        id:4,
        name:'shell',
        date:'2009-02',
        price:33.00,
        count:1
      }
    ]
  },
  methods:{
    // sumPrice(price){
    //   return "￥" + price.toFixed(2);
    // }
    add(index){
      this.books[index].count++;
    },
    sub(index){
      this.books[index].count--;
    },
    removeHandler(index){
      this.books.splice(index,1)
    }
  },
  computed:{
    totalPrice(){
      let total=0;
      //总价的计算有下面三种方式：
      // 1.
      // for(let i=0;i<this.books.length;i++){
      //   total+=this.books[i].price*this.books[i].count;
      // }
      //return total；
      // 2.
      // for (let item of this.books)
      //   total+=item.price*item.count;
       //return total；
      //3.
      // reduce
      return this.books.reduce(function(preValue,book){
        return preValue+book.price*book.count；
      },0)
    }
  },
  filters:{
    showPrice(price){
    //对价格保留两位小数并加上价格符号
      return "￥" + price.toFixed(2)
    }
  },
})

效果图：

qyshskx

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实现购物车案例

今天的小案例，用Vue实现购物车小案例，下面是代码以及效果图：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href...
复制链接

扫一扫