Vue.js学习笔记——7.购物车小案例

最新推荐文章于 2024-03-19 08:45:49 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-03-19 08:45:49 发布

阅读量350

点赞数 2

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/110142506

版权

购物车小案例

目标
实现

目标

实现一个购物车页面，从data中取得书本对象，将对象的各个属性展示到购物车表格中，提供增减书本数量和删除书本操作，书本数量为1时不可再减少，购物车没有书本时页面输出“购物车为空”，最后输出购物车内总价格，总价格随书本的数量动态变化

实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<!--    判断books数组是否为空-->
  <div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格

最低0.47元/天解锁文章

土拨鼠的忧伤丶

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记——7.购物车小案例

购物车小案例目标实现目标实现一个购物车页面，从data中取得书本对象，将对象的各个属性展示到购物车表格中，提供增减书本数量和删除书本操作，书本数量为1时不可再减少，购物车没有书本时页面输出“购物车为空”，最后输出购物车内总价格，总价格随书本的数量动态变化实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</
复制链接

扫一扫