文章目录

P – 最终效果图

Vue 学习笔记(六) P41-P43_Vue

P40 19-购物车案例-界面搭建

1. books.js

放在目录js下

// books.js
const vm = new Vue({
  el: '#app',
  data:{
    books: [
      {
        id: 1, 
        name: '<<算法导论>>',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2, 
        name: '<<Unix编程艺术>>',
        date: '2006-2',
        price: 59.00,
        count: 3
      },
      {
        id: 3, 
        name: '<<编程珠玑>>',
        date: '2016-9',
        price: 39.00,
        count: 2
      },
      {
        id: 4, 
        name: '<<代码大全>>',
        date: '2019-9',
        price: 128.00,
        count: 1
      },
    ]
  }
})

2. style.css

放在目录 css 下

// style.css
table{
  border: 1px solid #000000;
  border-collapse: collapse;
  border-spacing: 0;
}

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

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

3. index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    
    <script src="js/vue.js"></script>
    <script src="js/books.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>

  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>No.</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="book in books">
            <td v-for="value in book">{{value}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

4. 初次运行问题

表格数据无法显示,错误提示为​​Cannot find element: #app​​

Vue 学习笔记(六) P41-P43_Vue_02


Vue 学习笔记(六) P41-P43_css_03


原因

引入books.js的位置不对

不应该在中引入,而应该在body中引入,而且必须入在之后

<script src="js/books.js"></script>
移动到</div>之后

这样就能正常显示

Vue 学习笔记(六) P41-P43_运行问题_04

5. 界面定制化

自定义不用统一的遍历,不然我们要在里面做判断来决定是否显示各项组件
修改如下

<tbody>
  <tr v-for="book 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}}</td>
    <td>
      <button>-</button>
      {{book.count}}
      <button>+</button>
    </td>
    <td>
      <button>移除</button>
    </td>
  </tr>
</tbody>

显示

Vue 学习笔记(六) P41-P43_Vue_05

P41 20-购物车案例-过滤器的使用

实现:价格显示小数两位, 价格前面显示￥
目标1: 价格显示小数两位

<td>{{book.price.toFixed(2)}}</td>

目标2: 价格前面显示￥

<td>{{'￥'+book.price.toFixed(2)}}</td>

使用方法来实现目标1和目标2

<td>{{getFinalPrice(book.price)}}</td>

使用过滤器来实现

<td>{{book.price | showPrice}}</td>

Vue 学习笔记(六) P41-P43_运行问题_06

  • 优点
  • 增加代码复用性
  • 降低代码耦合性

P42 21-购物车案例-改变购买数量

  • 目标
  • 1 点击+数量加1,点击-数量减1
  • 减的数量不能少于1
  • 加的数量不能大于5
<td>
  <button :disabled="book.count <= 1" @click="decrement(index)">-</button>
  {{book.count}}
  <button :disabled="book.count >= 5" @click="increment(index)">+</button>
</td>

Vue 学习笔记(六) P41-P43_运行问题_07

  • 比较小知识点
  • 1​​==​​ 和 ​​!=​​
  • 2 !==
  • 3​​>=​​
  • 4​​<=​​

P43 22-购物车案例-移除按钮-最终价格

  • 目标
  • 1 点击移除按钮,移除该行
  • 2 当表格为空,隐藏整个表格并给出提示
  • 3 计算总价并按规定的格式显示

1 移除

<td>
  <button @click="removeHandler(index)">移除</button>
</td>

2 判断隐藏

<div id="app">
  <div v-if="books.length">
    <table>
      ...
    </table>
    <h2>总价格:{{}}</h2>
  </div>  
  <div v-else>
    <h2>购物车为空</h2>
  </div>
</div>

Vue 学习笔记(六) P41-P43_html_08

3 显示总价

<h2>总价格:{{totalPrice | showPrice}}</h2>
computed:{
  totalPrice() {
    let total = 0;
    for (let i = 0; i < this.books.length; ++i){
      total += this.books[i].price * this.books[i].count;
    }
    return total;
  }
},

Vue 学习笔记(六) P41-P43_Vue

  • 关于遍历的简化
// 方法 1 
for(let book in/of books){

}

// 方法 2