个人博客
0%

【Vue】课堂练习

发表于 分类于

学习Vue时的课堂练习小案例

一、作业1

  • 需求：遍历数组，数组第一个元素文字颜色为红色，其余元素点击谁，谁变红
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <!--需求：
    遍历数组，数组第一个文字颜色为红色，其余点击谁，谁变红
  -->
  <div id="app">
    <ul>
      <li v-for="(game, index) in games"
          :class="{active: currentIndex === index}" <!--class属性对象绑定，true使用样式-->
          @click="changeIndex(index)">
        {{game}}
      </li>
    </ul>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        games: ["怪物猎人", "口袋妖怪", "异度之刃", "最终幻想"],
        currentIndex: 0 //用于表示文字样式状态，默认数组0号位使用样式
      },
      methods: {
        changeIndex(index){ //点击修改样式状态值
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>
</html>
  • 效果

二、图书购物系统

  • style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}
  • main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const vue = 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: 1
        },
        {
          id: 3,
          name: "《编程珠玑》",
          date: "2008-10",
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: "《代码大全》",
          date: "2006-3",
          price: 128.00,
          count: 1
        }
        ]
  },

  //过滤器  使用格式：{{过滤对象 | 过滤器}}
  filters: {
    showPrice(price) {
      return "￥" + parseFloat(price).toFixed(2); //toFixed(number)：保留小数点后几位
    }
  },

  methods: {
    increment(index) { //数量增加
      this.books[index].count ++;
    },
    decrement(index) { //数量减少
        this.books[index].count --;
    },
    remove(index){ //移除购物车
      this.books.splice(index, 1);
    }
  },

  computed: {
    totalPrice() { //计算总价格
      let result = 0;
      for (let i=0; i<this.books.length; i++){
        result += this.books[i].count * this.books[i].price;
      }
      return result;
    }
  }
});
  • 购物车.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./css/style.css"> <!--引入CSS样式-->
</head>
<body>
<div id="app">
  <div v-if="books.length"> <!--v-if , v-else实现购物车为空时页面切换-->
    <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>{{book.id}}</td> <!--为了方便具体表格添加元素，建议手动遍历-->
        <td>{{book.name}}</td>
        <td>{{book.date}}</td>
        <!--使用过滤器保留两位小数-->
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrement(index)" :disabled="book.count < 2">-</button> <!--绑定disabled，实现书籍减到1时，无法继续点击-->
          {{book.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td>
          <button @click="remove(index)">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <h2>总价格为：{{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

<script src="./js/vue.js"></script> <!--引入JavaScript代码-->
<script src="./js/main.js"></script>
</body>
</html>
  • 效果