weixin_59624094的博客

网上购物已经成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？本题需要在已提供的基础项目中，使用 Vue 2.x 的知识，解决购物车商品管理过程中遇到的问题。当前出现的问题在“商品列表”中点击 N 次“加入购物车”按钮，会在购物车列表中出现 N 个该商品，且初始数量为 1。在“购物车”中点击商品数据后的加号（“+”）按钮，会在购物车列表中重复出现该商品，且初始数量为 1。在“购物车”中点击商品数据后的减号（“-”）按钮，并未将商品从购物车中移出。

Vue 项目中你可以用v-model指令在表单及元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。常用表单元素注意：v-modelvaluecheckedselected。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的data选项中声明初始值。v-model。

是非常常见的需求，阻止事件冒泡或捕获或者事件默认行为。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。修饰符，事件会触发冒泡行为，点击子元素也会触发父元素的相同事件。之前提过，修饰符是由点开头的指令后缀来表示的。为了解决这个问题，Vue.js 为。在事件处理程序中调用。

nav：数值 index：索引 navbar：数组中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’。用key管理可复用的元素，key属性必须是唯一的标识建议尽量在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单。