进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> <button>重置信息</button> </div> </div> <!--显示表格--> <div class="table-warp"> <div class="title">商…

Cookie小案例------记住浏览过的商品记录 我们知道,这个功能在电商项目中非经常见.这里处理请求和页面显示都是由servlet实现,主要是为了体现cookie的作用, 实现功能例如以下: 1,点击购买的商品后,显示到还有一页面 2.记住用户浏览过的商品,并在页面时中显示 3,当浏览过的数量超过最大值限度时,最以下一个商品被挤下去 4,当浏览过的商品本身就在浏览记录中,显示列表将其从中间移到最上面 显示一打开站点的样子和显示用户的浏览记录: package cn.itcast.cookie…

代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过滤器: (2)使用自定义过滤器: 自定义过滤器: a.全局配置:Vue.filter( id, [definition] ) b. 局部配置:在Vue实例中配置filters 详细介绍网址:https://cn.vuejs.org/v2/api/#Vue-filter 过滤器语法: 无参:{{msg…

实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-decoration: none; } HTML: <td style="display: flex;"> <a style="flex: 0.5;" href="#" @click.prevent="item.num--&qu…

通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName:'lovely.ico', goods:{ id:'', name:'', price:'', num:'', type:'' }, goodsType:['零食','电子产品','生活用品'], goodsArry:[ {id:,type:'零食'}, {id:,num:,type:'电子产品'…

实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <div class="sub_title">商品列表</div> <table border=" align="center"> <tr> <th>序号</th> <th>编号</…

最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border:2px solid gray; } .header{ margin: 10px; border: 1px solid gray; } .header .title{ color: rgb(,,); background: rgb(,,); } .sub_title{ background:rgb(,,);…

logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div class="header"> <img :src="imgUrl+imgName" class="logo" height="200px" width="150px" style="paddin…

一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src目录下创建store.js, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //vuex五大将 state:{ num:1//小球的数量默认为1 }, gette…

一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                                           2.在购物车点击加减按钮,数值做出对应变化 二.主要内容 1.实现效果:点击购物车的时候可以查看到购物车的商品信息 2.解决刷新,购物车上数值不变 (1)新建一个Cart.vue展示购物信息,并将路由添加到index.js中 (2)购物车里面涉及到:存储商品信息,…