vue项目之实现localstorage版本的商品管理

最新推荐文章于 2023-11-08 17:26:11 发布

一十四画生

最新推荐文章于 2023-11-08 17:26:11 发布

阅读量222

点赞数

文章标签： vue js vue.js javascript es6

本文链接：https://blog.csdn.net/weixin_44395929/article/details/104956775

版权

//今天来做个简单的商品添加管理页面(用vue和localStorage实现)

首先来了解下vue的几个指令:

{{}} =>插值

v-bind 动态绑定属性 => 缩写 :属性
v-if 动态创建/删除
v-show 动态显示/隐藏
v-on:click 绑定事件 => 缩写 @事件
v-for 遍历
v-model 双向绑定表单
v-cloak 防止表达式闪烁

一、html页面布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    //引入bootstrap库,需要自己下载放入到对应的文件夹中,也可以直接链接bootcdn给的链接
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        .off {
            color: #e0e0e0;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <h1>购物车</h1>
        <form action="">
            <div class="form-group">
                <label for="pro_name">商品名称</label>
                <input type="text" class="form-control" id="pro_name" placeholder="请输入商品名称">
            </div>
            <div class="form-group">
                <label for="pro_price">商品单价</label>
                <input type="text" class="form-control" id="pro_price" placeholder="请输入商品单价">
            </div>
            <div class="form-group">
                <label for="pro_num">商品数量</label>
                <input type="text" class="form-control" id="pro_num" placeholder="请输入商品数量">
            </div>
            <div class="form-group">
                <label for="shelf_on">是否上架</label>
                <input type="radio" id="shelf_on" name="is_shelf" checked />上架
                <input type="radio" id="shelf_off" name="is_shelf" />下架
            </div>
            <div>
                <input type="button" value="添加商品" class="btn btn-success" @click="add_product" />
            </div>
        </form>
        <table class="table">
            <caption>
                <h3>商品展示</h3>
            </caption>
            <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>当前状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="product,index in products" v-bind:class="{ off:!product.is_shelf}">
                    <td>{{index+1}}</td>
                    <td>{{product.pro_name}}</td>
                    <td>{{product.pro_num}}</td>
                    <td>{{product.pro_price}}</td>
                    <td>{{product.pro_num*product.pro_price}}</td>
                    <td>{{product.is_shelf ? "上架" : "下架"}}</td>
                    <td>
                        <input type="button" class="btn btn-primary" value="改变状态" @click="change_shelf(index)" />
                        <input type="button" class="btn btn-danger" value="删除" @click="del_product(index)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

二、js代码实现

 //使用vue框架需要下架vue文件
 <script src="./js/vue.js"></script>
    <script>
        new Vue({
			//挂载到id名为app的区域
			//也可以选择一些类名,但是不推荐,因为挂载只能给一个挂载,多个vue会报错
	        el: "#app",
           	//created:function(){//在这里执行vue实例化对象后立即要做的事情}
            created() {
            	//判断localstorage里面是否存在data
                if (!this.get_data()) {
                	//不存在就创建一个空数组
                    localStorage.setItem("data", "[]");
                } else {
                	//存在就遍历该数组并且添加到vue的products数组里面
                    this.get_data().forEach(item => {
                        this.products.push(item)
                    });
                }
            },
            data: {
            	//存放数据区域
                products: []
            },
            methods: {
            	//添加按钮触发该函数
                add_product() {
                    let product = {
                        pro_name: $("#pro_name").value,
                        pro_num: Number($("#pro_num").value),
                        pro_price: Number($("#pro_price").value),
                        is_shelf: $("#shelf_on").checked? true : false
                    }
                    this.products.push(product);
                    this.set_data(this.products);
                }
                ,
                //改变按钮触发该函数
                change_shelf(i) {
                    this.products[i].is_shelf = !this.products[i].is_shelf;
                    this.set_data(this.products);
                }
                ,
                //删除按钮触发该函数
                del_product(i) {
                    this.products.splice(i, 1);
                    this.set_data(this.products);
                }
                ,
                //获取localstorage中名为data的数据
                get_data() {
                    return JSON.parse(localStorage.getItem("data"));
                }
                ,
                 //将arr保存到localstorage中且名为data
                set_data(arr) {
                    localStorage.setItem("data", JSON.stringify(arr));
                }
            }
        })

        function $(ele) {
            let query = null;
            if (ele[0] === "#") {
                query = document.querySelector(ele);
            } else {
                query = document.querySelectorAll(ele);
            }
            return query;
        }
    </script>
</body>

一十四画生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目之实现localstorage版本的商品管理

//今天来做个简单的商品添加管理页面(用vue和localStorage实现)首先来了解下vue的几个指令:{{}} =>插值 v-bind 动态绑定属性 => 缩写 :属性 v-if 动态创建/删除 v-show 动态显示/隐藏 v-on:click 绑定事件 => 缩写 @事...
复制链接

扫一扫