vue基础购物车

简介: vue基础购物车

html:


<div id="box">
    <table border="1" cellspacing="0" cellpadding="20">
    <thead>
      <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>操作</th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr v-for="(item,index) in list" :key="item.id"
      :style="{'background-color':item.quantity>0?'#c4c4c4' : ''}">
      <td>{{item.name}}</td>
      <td>{{item.number}}</td>
      <td>
        <button @click="item.quantity--" v-show="item.quantity>0">-</button>
        <span>{{item.quantity}}</span>
        <button @click="item.quantity++">+</button>
      </td>
      <td>
        <button @click="edit(item,index)">编辑</button>
        <button @click="deletes(list,index)">删除</button>
        <!-- 删除头部,但只能删除头部 -->
      </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
      <th></th>
      <th>总价:¥{{all_price()}}</th>
      <th>总数:{{all_num()}}</th>
      <th></th>
      </tr>
    </tfoot>
    </table>
    <button @click="hi()">添加商品</button>
    <div v-show="add">
    <input type="text" v-model="product_name" placeholder="请输入商品名称">
    <input type="text" v-model.number="commodity_prices" placeholder="请输入商品价格">
    <input type="text" v-model.number="quantity_of_commodity" placeholder="请输入商品数量">
    <button @click="edit_save(list,product_name,commodity_prices,quantity_of_commodity)">确定</button>
    <button @click="hide()">取消</button>
    </div>
    <div v-show="add_s">
    <input type="text" v-model="edit_data.name" placeholder="请输入商品名称">
    <input type="text" v-model.number="edit_data.number" placeholder="请输入商品价格">
    <input type="text" v-model.number="edit_data.quantity" placeholder="请输入商品数量">
    <button @click="edit_savesss(item,index)">确定</button>
    <button @click="hidess()">取消</button>
    </div>
  </div>

vue:


<script>
    const {
    createApp,
    ref,
    reactive
    } = Vue;
    createApp({
    setup() {
      let add = ref(false)
      let add_all = ref(false)
      // 商品全部为false
      const list = ref([{
        id: 1,
        name: "衣服",
        quantity: 0,
        number: "120",
      },
      {
        id: 2,
        name: "鞋子",
        quantity: 0,
        number: "80",
      },
      {
        id: 3,
        name: "wa6子",
        quantity: 0,
        number: "860",
      },
      ])
      // 创建一个数组
      const edit_data = reactive({
      id: 1,
      name: "",
      quantity: 0,
      number: 0,
      })
      // 商品总数
      let all_num = () => {
      let quantity = 0;
      list.value.forEach(item => {
        quantity += item.quantity
      })
      return quantity;
      }
      // 定义下标
      const edit_index = ref('0')
      // 总价
      let all_price = () => {
      // console.log(JSON.parse(JSON.stringify(list.value)));
      // return JSON.parse(JSON.stringify(list.value)).reduce((a, b) => a + (b.quantity * b.number), 0);
      return list.value.reduce((a, b) => a + (b.quantity * b.number), 0);
      }
      // let all_price = () => {
      //  return list.value.reduce((a, b) =>a.quantity * a.number + b.quantity * b.number);
      // }
      // 点击添加商品显示输入框
      let commodities = () => {
      add.value = true;
      }
      // 点击添加商品
      const product_name = ref('')
      console.log(product_name);
      // 获取商品名称
      const commodity_prices = ref('')
      console.log(commodity_prices);
      // 获取商品价格
      const quantity_of_commodity = ref('')
      console.log(quantity_of_commodity);
      // 获取商品数量
      let edit = (item, index) => {
      add_all.value = true
      Object.assign(edit_data, item)
      // add.value = true;
      edit_index.value = index;
      }
      // 编辑确定
      let ensure = () => {
      list.value[edit_index.value] = edit_data;
      add_all.value = false;
      }
      // 编辑取消关闭
      let abolish = () => {
      add_all.value = false;
      }
      // 新增取消关闭
      let hide = () => {
      add.value = false
      console.log(add);
      }
      // 新增确认
      const edit_save = (list, product_name, commodity_prices, quantity_of_commodity) => {
      let ojj = {
        name: product_name,
        quantity: commodity_prices,
        number: quantity_of_commodity,
      }
      list.push(ojj)
      add.value = true;
      // counts()
      deletes()
      }
      // 删除
      function deletes(list, i) {
      list.splice(i, 1);
      }
      return {
      hide,
      product_name,
      commodity_prices,
      quantity_of_commodity,
      list,
      add,
      commodities,
      deletes,
      all_num,
      all_price,
      edit,
      edit_data,
      edit_index,
      edit_save,
      add_all,
      ensure,
      abolish
      }
    }
    }).mount('#box')
  </script>


相关文章
|
11天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
11天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
11天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
16天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
17天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
17天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
17天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
16天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
18天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
16天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉