element-ui踩坑记录之el-pagination分页使用el-pagination为表格分页显示时,出现一个bug.每页设置显示7条明明数据有多于21但是分页后只有3页.如下图:查了一圈才发现原来是 分页控件没设置 每页显示的数量: :page-size设置后即可正常显示出数据.这里再记录一个:当跳转到第二页后再次查询...

                                    Vue之简单的统计功能今天我们来看看vue怎么实现简单的统计价格功能。效果图：最后的价格自动根据选择的项目来计算最终价格。1.首先绑定每个项目绑定class 如果选中则增加样式active，改变背景颜色 :class="{'active':item.active}"2.写计算事件，过滤掉集合中未选中的项..

nodejs连接mysql数据库并作为模块使用使用nodejs做api接口来作为vue项目的后端逻辑处理需要连接mysql数据库,并作为组件可以复用.首先新建一个db.js模块,然后引入mysql模块 (如果没有则需要安装 cnpm install mysql -g)const mysql = require('mysql');...

                                            Vue之导航栏今天我们来用vue实现简单的导航栏。效果图：根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。再为每一个连接注册点击事件：@click="showDiv=1"分别让sho..

                                         Vue之图片轮播今天来看看vue怎么实现图片轮播，个人实现方式，如果你有更好的实现方式，欢迎来沟通，嘿嘿。效果图：由于没有素材就随便找了123456来代替选中的圆点。实现思路：首先绑定数据源，循环出每个图片，在通过isShow字段来判断是否显示图片。在图片元素写这两个 v-bind:src="...

                                        Vue之改变布局我们在购物的网站经常会看物品列表可以切换显示模式。也就是有两种布局可以来回切换，看用户喜欢哪种来选择。今天我们来看看vue怎么实现简单的布局切换。效果图：点击图形就只显示图片，点击图形加文字就多显示出文字。其实实现起来很简单，绑定一个数据集，里面有图片路径和图片文字。用两个div显示...

                                          Vue之购物车功能今天来看看vue怎么实现简单的购物车功能。效果图： 我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。我们来看看简单的购物车功能怎么实现：1.先完成数据绑定代码：html：<tr v-for=...