学习vue笔记（2）

最新推荐文章于 2024-09-28 22:16:01 发布

明月挽我心

最新推荐文章于 2024-09-28 22:16:01 发布

阅读量91

点赞数 4

分类专栏：前端文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/xxxxxii/article/details/117000208

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

书籍购物车案例

效果图：

1.最初显示界面
在这里插入图片描述最初时购买数量为0，总价格为0。
2.增加购买数量

在这里插入图片描述购买数量增加，价位相对增加。
3.点击移除按钮

点击移除按钮，删除相对应的书籍，

在这里插入图片描述
当表格中所有书籍删除完之后，显示购物车为空。

源代码

1.index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</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="(item,index) in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.data}}</td>
      <td>{{item.price|showPrice}}</td>
      <td>
        <button @click="decrement(index)" :disabled="item.count==0">-</button>
        {{item.count}}
        <button @click="increment(index)">+</button>
      </td>
      <td><button @click="removeHandle(index)">移除</button></td>
    </tr>
    </tbody>
  </table>
  <h2>总价格:{{totalPrice |showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空 </h2>
</div>

<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

2.main.js文件

const app = new Vue({
  el:'#app',
  data:{
   books:[
     {
       id:1,
       name:'《算法导论》',
       data:2006-9,
       price:85.00,
       count:0
     },
     {
       id:2,
       name:'《UNIX编程艺术》',
       data:2006-2,
       price:59.00,
       count:0
     },
     {
       id:3,
       name:'《编程珠玑》',
       data:2008-10,
       price:39.00,
       count:0
     },
     {
       id:4,
       name:'《代码大全》',
       data: 2006-3,
       price:128.00,
       count:0
     },
   ]
  },
  methods:{
    decrement(index) {
      this.books[index].count--
    },
    increment(index) {
      this.books[index].count++
    },
    removeHandle(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);
    }
  }
})

3.style.css文件

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

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

注意点：

1.初始化或页面刷新后，购买数量显示为0，且无法减少，只能增加。

 <button @click="decrement(index)" :disabled="item.count==0">-</button>

此句，表明购买数量不能小于0。

:disabled="item.count==0"

2.价格和总价格的数字显示小数点后两位，并且前边添加¥符号
在js的方法中，添加filters函数：

filters:{
    showPrice(price){
      return '¥'+price.toFixed(2);
    }
  }

在html中，价格显示为：

<td>{{item.price|showPrice}}</td>
<h2>总价格:{{totalPrice |showPrice}}</h2>

明月挽我心

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录