【VUE学习】购物车案例

最新推荐文章于 2024-04-29 10:23:29 发布

飞天的大鹅

最新推荐文章于 2024-04-29 10:23:29 发布

阅读量706

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sharenfish/article/details/121808009

版权

<!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>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    table {
      margin: 100px auto;
      border-collapse: collapse;
      border-color: #9e9898;
      text-align: center;
    }
 
    thead {
      background-color: #ccc;
    }
 
    td {
      width: 100px;
      height: 50px;
      padding: 10px;
    }
 
    .num button {
      padding: 0 5px;
    }
  </style>
</head>
 
<body>
  <div id="app">
    <span v-if="books.length == 0">
      购物车为空
    </span>
    <table border="1" v-else>
      <thead>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.birth}}</td>
          <td>￥{{item.price.toFixed(2)}}</td>
          <td class="num"><button @click='add(index)'>↑</button>{{item.count}}<button @click='sub(index)'
              :disabled='item.count == 0'>↓</button>
          </td>
          <td><button @click='remove(index)'>移除</button></td>
        </tr>
        <td><span>总价:${{total.toFixed(2)}}</span></td>
      </tbody>
 
    </table>
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {
          name: '算法导论',
          birth: '2006-9',
          price: 85.00,
          count: 1
        },
        {
          name: 'UNIX编程艺术',
          birth: '2006-2',
          price: 59.00,
          count: 1
        },
        {
          name: '编程珠玑',
          birth: '2008-10',
          price: 39.00,
          count: 1
        },
        {
          name: '代码大全',
          birth: '2006-3',
          price: 128.00,
          count: 1
        }
      ]
    },
    computed: {
      total() {
        // let total = 0;
        // for (let i = 0; i < this.books.length; i++) {
        //   total += this.books[i].price * this.books[i].count;
        // }
        // return total;
 
        return this.books.reduce(function (pre, book) {
          return pre + book.price * book.count;
        }, 0)
      }
    },
    methods: {
      add(index) {
        if (this.books[index].count >= 0) {
          ++this.books[index].count;
        } else {
          this.books[index].count = 0;
        }
      },
      sub(index) {
        if (this.books[index].count > 0) {
          --this.books[index].count;
        } else {
          this.books[index].count = 0;
        }
      },
      remove(index) {
        this.books.splice(index, 1);
      }
    }
  })
</script>
 
</html>

Document

购物车为空

	书籍名称	出版日期	价格	购买数量	操作
{{index+1}}	{{item.name}}	{{item.birth}}	￥{{item.price.toFixed(2)}}

})

飞天的大鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【VUE学习】购物车案例

<!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>Document&
复制链接

扫一扫