八、书籍购物车案例

最新推荐文章于 2022-11-22 19:15:31 发布

不会Java怎么找女朋友

最新推荐文章于 2022-11-22 19:15:31 发布

阅读量1.2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/Lin_Willen/article/details/112421078

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-购物车案例

1.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-购物车案例</title>
  <style>
    table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }

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

    th {
      background-color:#f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>
</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="(book,index) in books">
        <!--      <td v-for="value in book">{{value}}</td>-->
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrement(index)" :disabled="book.count<=1">-</button>
          {{book.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td>
          <button @click="removeHandle(index)">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <h2>总价格：{{totalPrice | showPrice}}</h2>
  </div>
  <h1 v-else>购物车为空</h1>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      books:[
        {
          id:1,
          name:'《算法导论》',
          date:'2006-9',
          price:85.00,
          count:1,
        },
        {
          id:2,
          name:'《Unix编程艺术》',
          date:'2006-2',
          price:59.00,
          count:1,
        },
        {
          id:3,
          name:'《编程珠玑》',
          date:'2008-10',
          price:39.00,
          count:1,
        },
        {
          id:4,
          name:'《代码大全》',
          date:'2006-3',
          price:128.00,
          count:1,
        },
      ]
    },
    methods: {
      decrement(index){
        this.books[index].count--;
      },
      increment(index){
        this.books[index].count++;
      },
      removeHandle(index){
        // splice(index,howmany,item1,.....,itemX)
        // index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
        // howmany:必需。要删除的项目数量。如果设置为 0，则不会删除项目。
        // item1, ..., itemX:可选。向数组添加的新项目。
        this.books.splice(index,1);
      }
    },
    filters:{
      /*
      使用过滤器 {{myData | 过滤器}}，会默认把myData传给过滤器
      <div>{{myData | filterName}}</div>
      <div>{{myData | filterName(arg)}}</div>
      */
      showPrice(price){
      	// 将price这个数值保留两位小数
        return '￥' + price.toFixed(2);
      }
    },
    computed: {
      totalPrice(){
        let totalPrice = 0;
        for (let i = 0; i < this.books.length; i++) {
          totalPrice += this.books[i].price * this.books[i].count;
        }
        return totalPrice;
      }
    }
  })
</script>
</body>
</html>

运行结果

在这里插入图片描述

02-JS高阶函数——filter/map/reduce详解

2.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-js高阶函数的使用</title>
</head>
<body>

<div id="app">
  {{"原来的数组："+ nums}}<br>
  {{'过滤掉小于100之后的新数组：' + useFilter()}}<br>
  {{'将过滤之后的数组，乘以2后的数组：' + useMap()}}<br>
  {{'乘以2后的数组各元素的和：'+ useReduce()}}<br>
  {{'三种函数，联用：' +  useOnceCount()}}<br>
  {{'一行代码搞定，以上三种需求：' + useOnceRowCount()}}<br>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      nums: [10, 20, 111, 222, 333, 444, 40, 50]
    },
    methods: {
      // 1.filter过滤器
      // filter中的回调函数有一个要求，必须返回一个boolean值
      // true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
      // false:当返回false时，函数内部会过滤掉这次的n
      useFilter(){
        let newNums = this.nums.filter(function (n) {
          return n < 100;
        })
        return newNums;
      },
      useMap(){
        let newNums2 = this.useFilter().map(function (n) {
          return n * 2;
        })
        return newNums2;
      },
      // 3.reduce的使用
      // 作用：对数组中所有的内容进行汇总(相加，相乘之类的）
      useReduce(){
        // reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
        // reduce(回调函数,初始默认值)
        // 第一次： preValue:0  n:20
        // 第二次： preValue:20 n:40
        // 第三次： preValue:60 n:80
        // 第四次： preVAalue:140 n:100
        // 回调:  返回240
        let total = this.useMap().reduce(function (preValue,n) {
          return preValue+n
        },0)
        return total;
      },
      useOnceCount(){
        let total = this.nums.filter(function (n) {
          return n < 100
        }).map(function (n) {
          return n * 2
        }).reduce(function (preValue,n) {
          return preValue + n
        },0)
        return total
      },
      useOnceRowCount(){
        let total = this.nums.filter(n => n < 100).map(n => n * 2).reduce(((previousValue,n) => previousValue + n),0);
        return total;
      }
    }
  })
</script>
</body>
</html>

2.2 运行结果

在这里插入图片描述