vue做购物清单总结记录

最新推荐文章于 2022-07-26 18:04:45 发布

木槿琉璃

最新推荐文章于 2022-07-26 18:04:45 发布

阅读量668

点赞数

分类专栏：前端杂记

本文链接：https://blog.csdn.net/weixin_44006116/article/details/90678373

版权

博主通过制作Vue购物清单应用来深入理解Vue基础知识，包括数据流向操作和事件处理。虽然代码布局尚不成熟，但已完成初步功能，有助于巩固Vue最基础的概念。未来计划采用store或vuex进行改进。

摘要由CSDN通过智能技术生成

背景
囫囵吞枣的看了一遍vue，做这个理解一下很浅显的知识（没有经验，有点乱七八糟），算是第一版，以后每进步一些能改的话就改一点。
结果图（css还是不熟练）
-
代码
四个文件：

App.vue

<template>
    <div>
        <hr>
        <h3>购物清单</h3>
        <ul class='item-desc'>
            <li>
                <input type='checkbox' :checked='checkedAll' @change='changeChecked'>全选
            </li>
            <li
                v-for='item,index in productItems'
                :key='item'
            >{
  { item }}</li>
        </ul>
        <ul>
            <li 
                is='TodoList'
                v-for='product in products'
                :product='product'
                :key='product.id'
                @delete='deleteProduct($event)'
            ></li>
        </ul>
        <ul class='operate-item'>
            <li><input type='button' value='删除所选商品' @click='deleteCheckedProducts'></li>
            <li><input type='button' value='继续购物' @click='continueBuy'></li>
            <li><p><span>{
  { numAll }}</span>&nbsp;件商品总计（不含运费）：<span>{
  { monkeyIcon }}{
  { allPrice }}</span></p></li>
            <li><input class='btn-pay' type='button' value='去结算'></li>
        </ul>
        <hr>
    </div>
</template>

<script>
import TodoList from './components/TodoList'
export default {
    data(){
        return {
            productItems: ['商品', '数量', '单价（元）', '金额（元）', '操作'],
            products: [
                {
                    id: 0,
                    desc: {
                        name: '[1]香蕉',
                        factory: '[1]未知',
                        description: '[1]助消化',
                        origin: '[1]未知'
                    },
                    imgPath: require('../t2/file/test.jpg'),
                    monkeyIcon: '￥',
                    price: 10,
                    num: 0, 
                    totalPrice: 0,
                    checked: false