Vue基础语法练习，制作响应式商品购物车案例

最新推荐文章于 2023-09-01 16:59:15 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-09-01 16:59:15 发布

阅读量596

点赞数

分类专栏： Vue.js 文章标签： vue html css javascript 响应式的购物车

本文链接：https://blog.csdn.net/m0_47015897/article/details/118380085

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本案例涉及的Vue知识点有：v-if、v-else、v-for、v-bind、v-on等
本例主要包括三个文件：index.html、style.css、main.js
案例效果图：
在这里插入图片描述
案例要求：

1、响应式的显示商品记录
2、点击+、-按钮可以增加减少商品数量
3、点击移除操作，删除对应记录
4、表格下方总价格根据商品数量改变
5、商品删除后，其余记录的id随之改变
6、购物车清空后，页面直接显示“购物车为空！”字样

案例源码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书籍购物车</title>
  <link rel="stylesheet" href="./style.css">
</head>
<!-- 
  案例要求：
    1、响应式的显示商品记录
    2、点击+、-按钮可以增加减少商品数量
    3、点击移除操作，删除对应记录
    4、表格下方总价格根据商品数量改变
    5、商品删除后，其余记录的id随之改变
 -->
<body>
  <div id="app">
    <div v-if='books.length'>
      <table>
        <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for='(items,index) in books'>
          <td>{{items.id}}</td>
          <td>{{items.name}}</td>
          <td>{{items.date}}</td>
          <td>{{items.price | showPrice()}}</td>
          <td>
            <button @click='decrement(index)' v-bind:disabled='items.count <= 1'>-</button>
            {{items.count}}
            <button @click='increment(index)'>+</button>
          </td>
          <td>
            <button @click='removeitem(index)'>移除</button>
          </td>
        </tr>
      </table>
      <h2>总价格：{{allPrice}}元</h2>
    </div>
    <h2 v-else>购物车为空！</h2>
  </div>
	<!-- 引入vue.js框架 -->
  <script src="../js/vue.js"></script>
  	<!-- 引入自定义js代码 -->
  <script src="./main.js"></script>
</body>
</html>

渲染文件：
style.css

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: center;
}

th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

js文件：
main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 95.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 99.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2009-1',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-4',
        price: 128.00,
        count: 1
      }
    ],
    db: false,
  },
  methods: {
    getFinalPrice(price){
      return '￥'+price.toFixed(2);
    },
    increment(index){
      console.log(this.books[index].count);
      this.books[index].count++
    },
    decrement(index){
      let c = this.books[index].count
      if(c <= 1){
        this.db = false
      }
      this.books[index].count--
    },
    removeitem(index){
      this.books.splice(index,1)
      for(let i=0; i<this.books.length; i++){
        this.books[i].id = i+1
      }
    }
  },
  filters: {
    showPrice(price){
      return '￥'+price.toFixed(2);
    }
  },
  computed: {
    allPrice(){
      let sum = 0
      for(let i=0; i<this.books.length; i++){
        sum += this.books[i].price * this.books[i].count
      }
      return sum
    }
  }
})