欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue脚手架安装和实现简单购物车

程序员文章站 2022-03-03 23:35:55
...

vue脚手架安装和实现简单购物车

vue-cli 脚手架安装

  • 管理员身份运行 powershell
  1. # 查看是否允许脚本执行
  2. get-ExecutionPolicy
  3. # 返回 RemoteSigned 允许脚本执行,返回 Restricted 禁止脚本运行,需允许
  4. set-ExecutionPolicy RemoteSigned
  • 运行 webstorm 或 vscode,终端安装 vue-cli 脚手架
  1. # npm包管理工具,淘宝定制镜像
  2. npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. # 使用淘宝定制镜像安装脚手架
  4. cnpm install -g @vue/cli
  5. # 查看 vue 版本
  6. vue --version
  • 脚手架创建 vue 项目,demo
  1. # 手动选择创建项目, vue3.x
  2. vue create demo

vue脚手架安装和实现简单购物车

简单购物车

  • src/App.vue
  1. <template>
  2. <table>
  3. <caption>简单购物车</caption>
  4. <thead>
  5. <tr>
  6. <th><input type="checkbox" v-model="isCheckedAll" @click="checkAll"></th>
  7. <th>编号</th>
  8. <th>商品名称</th>
  9. <th>价格</th>
  10. <th>购买数量</th>
  11. <th>金额</th>
  12. <th>操作</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr v-for="(item, index) in carts" :key="index">
  17. <td><input type="checkbox" v-model="item.isChecked" @click="checked(index)"></td>
  18. <td>{{ item.id }}</td>
  19. <td>{{ item.name }}</td>
  20. <td>¥{{ item.price }}</td>
  21. <td>
  22. <button @click="item.num++">+</button>
  23. {{ item.num }}
  24. <button @click="item.num--" :disabled="item.num <= 1">-</button>
  25. </td>
  26. <td>¥{{ (item.price * item.num).toFixed(2) }}</td>
  27. <td><a href="javascript:" title="删除" @click="delItem(index)">删除</a></td>
  28. </tr>
  29. </tbody>
  30. <tfoot>
  31. <tr>
  32. <th colspan="3">总金额</th>
  33. <th colspan="4">¥{{ amount }}</th>
  34. </tr>
  35. </tfoot>
  36. </table>
  37. </template>
  38. <script>
  39. export default {
  40. name: 'App',
  41. data() {
  42. return {
  43. // 是否全选
  44. isCheckedAll: true,
  45. // 购物车,对象数组
  46. carts: [
  47. {id: 1, name: '商品1', price: 10, num: 1, isChecked: true},
  48. {id: 2, name: '商品2', price: 10, num: 1, isChecked: true},
  49. {id: 3, name: '商品3', price: 10, num: 1, isChecked: true},
  50. {id: 4, name: '商品4', price: 10, num: 1, isChecked: true},
  51. {id: 5, name: '商品5', price: 10, num: 1, isChecked: true},
  52. ],
  53. }
  54. },
  55. methods: {
  56. // 删除项目
  57. delItem(index) {
  58. this.carts.splice(index, 1)
  59. },
  60. // 全选全不选
  61. checkAll() {
  62. this.isCheckedAll = !this.isCheckedAll
  63. this.carts.map(el => el.isChecked = this.isCheckedAll)
  64. },
  65. // 部分选中时的全选状态
  66. checked(index) {
  67. this.carts[index].isChecked = !this.carts[index].isChecked
  68. this.isCheckedAll = this.carts.some(el => el.isChecked)
  69. }
  70. },
  71. // 计算属性
  72. computed: {
  73. // 方法伪装成属性
  74. amount() {
  75. return this.carts.filter(el => el.isChecked).reduce((prev, curr) => prev + parseFloat((curr.price * curr.num).toFixed(2)), 0)
  76. }
  77. },
  78. }
  79. </script>
  80. <style lang="scss">
  81. table {
  82. width: 600px;
  83. margin: 0 auto;
  84. border-collapse: collapse;
  85. caption {
  86. font-size: larger;
  87. font-weight: bold;
  88. margin: 10px;
  89. }
  90. th, td {
  91. padding: 5px;
  92. border: 1px solid darkgray;
  93. }
  94. }
  95. </style>
  • src/main.js
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. createApp(App).mount('#app')
  • demo目录下,终端 npm run serve

    vue脚手架安装和实现简单购物车

  • 全选/全不选

    vue脚手架安装和实现简单购物车

  • 部分选中,增减数量

    vue脚手架安装和实现简单购物车

  • 删除商品4,改变总金额

    vue脚手架安装和实现简单购物车