Vue简单练手案例

以下是给初学Vue的小伙伴的三个练手小案例,希望对新手有一点点帮助~

案例1

要求:点击按钮, 依次改变3个li的顺序

效果图:

Vue简单练手案例_第1张图片

思路分析:利用数组的增加和删除方法实现

代码:





案例2

要求:点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

 效果图:

Vue简单练手案例_第2张图片

思路分析:利用数组驱动视图,增加和删除操作都围绕数组展开,摒弃之前的dom节点操作

 代码:



 

 【案例3

要求:完成商品浏览和删除功能, 当无数据时给用户提示信息

效果图:

Vue简单练手案例_第3张图片

思路分析:依旧是数据驱动视图,利用数组的相关方法去实现,注意条件判断

代码:



 

你可能感兴趣的:(前端_Vue,vue.js,javascript,前端)