vue初体验--库存管理系统小demo

最新推荐文章于 2024-06-22 16:35:57 发布

发光吖

最新推荐文章于 2024-06-22 16:35:57 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43598138/article/details/108896682

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <ul>
            <li v-for="(item,i) in product">手机名称：{{ item.name }} ---- 
                <button @click="reduce(item)">-</button>
                <span v-if="item.num>0">数量： {{ item.num }} 
                </span>
                <span v-else>无货</span>
                <button @click="item.num++">+</button>
                <button @click="removeItem(i)">删除</button>
            </li>
            <br>
            <button @click="addProduct()">新增</button>
        </ul>
    </div>
    <script src="vue/vue.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                title:"库存管理系统",
                product:[
                    {name:"iPhone",num:16},
                    {name:"小米",num:10},
                    {name:"华为",num:7},
                ],
            },
            methods:{
                removeItem(i) {
                    this.product.splice(i,1);
                },
                reduce(item){
                    item.num>0?item.num--:item.num=0;
                },
                addProduct(){
                    var name = prompt("请输入商品名称：");
                    var num = prompt("请输入商品库存：");
                    this.product.push({name:name,num:num});
                }
            }
        });
    </script>
</body>
</html>

发光吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue初体验--库存管理系统小demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=".
复制链接

扫一扫

专栏目录