Vue.js—数组中の响应式方法，购物车案例

最新推荐文章于 2025-04-23 21:56:19 发布

cb++

最新推荐文章于 2025-04-23 21:56:19 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44768794/article/details/115203444

检测数组更新
购物车案例
- 2.1 积累

检测数组更新

■ 因为Vue是响应式的，所以当数据发生改变时，Vue会自动检测数据变化，视图会发生对应的更新
■ Vue中包含了一组观察数组编译的方法，使用他们改变数组也会触发视图的更新

方法	作用
push()	在数组最后面添加元素
pop()	删除数组最后一个元素
shift()	删除数组第一个元素
unshift()	在数组最前面添加元素
splice()	删除元素/插入元素/替换元素
sort()	用于对数组的元素进行排序
reverse()	用于颠倒数组中元素的顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in nums">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        nums: ['a','b','c','d']
      },
      methods: {
        btnClick: function() {
          // 1.push方法,在数组最后面添加元素
          this.nums.push('aaa','bbb','ccc')  

          // 2.pop 方法,删除数组最后一个元素
          this.nums.pop()   

          // 3.shift(): 删除数组第一个元素
          this.nums.shift()

          // 4.unshift(): 在数组最前面添加元素
          this.nums.unshift('aaa','bbb','ccc')

          // 5.splice():   删除元素/插入元素/替换元素
          splice(start) 
          this.nums.splice(1)  // 没传入第二个元素，删除后面所有元素
          this.nums.splice(1,1)   //第二个元素开始，删除一个
          this.nums.splice(2,2,'h','i')  // 传入的元素替换删除的元素
          this.nums.splice(1,0,'x','y')  // 第二个元素传入0，并且后面跟上要插入的元素

          // 6.reverse(): 用于颠倒数组中元素的顺序
          this.nums.reverse()
        }
      }
    })
  </script>
</body>
</html>

购物车案例

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div v-if="books.length">
      <table>
      <thead>
        <tr>
          <th></th>
          <th>《算法导论》</th>
          <th>《UNIX编程艺术》</th>
          <th>《编程珠玑》</th>
          <th>《代码大全》</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td></td>
          <td>{{item.id}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price.toFixed(2)}}</td>
          <td><button @click='decrement(index)' v-bind:disabled='item.count <= 1'>-</button> {{item.count}} <button @click='increment(index)'>+</button></td>
          <td><button @click='btnRemove(index)'>移除</button></td>
        </tr>
      </tbody>
    </table>
    <div class="price">总价：{{totalPrice | showPrice}}</div>
    </div>
    <div v-else>购物车为空</div>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const ap = new Vue({
      el: '#app',
      data: {
        books: [
          {
            id: 1,
            date: '2006-9',
            price: 85.00,
            count: 1
          },
          {
            id: 2,
            date: '2006-8',
            price: 59.00,
            count: 1
          },
          {
            id: 3,
            date: '2006-7',
            price: 39.00,
            count: 1
          },
          {
            id: 4,
            date: '2006-6',
            price: 128.00,
            count: 1
          }
        ]
      },
      methods: {
        decrement: function(index) {
          // this.item[index].count--
          this.books[index].count--
        },
        increment: function(index) {
          this.books[index].count++
          // this.item[index].count++
        },
        btnRemove: function() {
          // 从第index个开始，删除一个，删除本身
          this.books.splice('index',1)
        }
      },
      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
        }
      },
      filters: {
        showPrice(price) {
          return '￥' + price.toFixed(2)
        }
      }
    })

  </script>

</body>

</html>

在这里插入图片描述
移除所有之后显示

2.1 积累

border-collapse: collapse; 去除表格间距
toFixed(index) 保留小数点后index位
v-bind:disabled='item.count <= 1 当count小于等于1时，不能交互
过滤器的使用
this.books.splice(‘index’,1) 从第index个开始，删除一个，即删除本身
遍历的三种方式

// 1.for循环
          let totalPrice = 0
          for (let i = 0;i<this.books.length;i++) {
            totalPrice += this.books[i].price*this.books[i].count
          }
          return totalPrice

          // 2.for(let i in this.books)
          let totalPrice = 0
          for (let i in this.books) {
            const book = this.books[i]
            totalPrice += book.price*book.count
          }
          return totalPrice

          // 3.for(let i of this.books)
          let totalPrice = 0
          for (let item of this.books) {
            totalPrice += item.price*item.count
          }
          return totalPrice