摘要： 需求的功能是：点击对应复选框，拿到最新的状态，再根据点击对应项的 id，把最新的状态，赋值到 list 数组中对应的 item 项。 1、给复选框添加点击事件： <!--复选框--> <a-checkbox :checked="item.done" @click="checked(item.id)" 阅读全文

摘要： 1、把 list.json 文件中第一个和第三个数据的 done 改为：true 2、把完成状态和复选框做绑定 复选框是由 checked 属性来指定的。添加属性绑定： <!--复选框--> <a-checkbox :checked="item.done"> {{item.info}} </a-ch 阅读全文

摘要： 1、给删除按钮添加点击事件： <!--删除链接--> <a slot="actions" @click="delItem(item.id)">删除</a> <script> export default { methods: { // 删除对应事项 delItemById(id) { this.$s 阅读全文

摘要： 1、给添加事项按钮增加点击事件： <a-button type="primary" @click="addItemToList">添加事项</a-button> <script> import { mapState } from 'vuex' export default { methods: { 阅读全文

摘要： 1、在 store/index.js 中定义新的数据 inputValue ： state: { list: [], // 所以的任务列表 inputValue: 'aaa' // 文本框的内容 }, 2、回到 Home.vue 做文本框的双向绑定： <a-input placeholder="请输 阅读全文

摘要： 1、在 public 目录下新建 mock 文件夹夹，创建 list.json 文件： [ { "id": 0, "info": "Racing car sprays burnimg fuel into crowd.", "dome": false }, { "id": 1, "info": "Ja 阅读全文

摘要： 1、通过 vue ui 命令打开可视化面板，创建新项目：vuex-demo 2、安装 vuex 依赖包 npm install vuex axios ant-design-vue -S 当然也可以使用可视化面板的依赖安装。 ant-design-vue 是UI组件库。 3、实现 Todos 基本布局 阅读全文

摘要： 1、安装vuex依赖包 npm install vuex --save 2、导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3、创建 store 对象 export default new Vuex.Store({ // state 中存放的就是全局共享的 阅读全文

摘要： ES6原生语法中提供了非常多好用的数组'遍历'方法给我们（forEach，every，some，map，filter，reduce，reduceRight，indexOf，lastIndexOf），让我们可以实现更多更强大的功能，下面让我们通过这篇文章好好学习下，该如何使用它们。 forEach 对 阅读全文

摘要： 我们可以用弹框的形式来实现 1、给下一步按钮添加点击事件： <div class="next-btn-wrap"> <a class="btn btn--m btn--red" href="javascript:;" @click="nextConfirm">下一步</a> </div> <scri 阅读全文

摘要： 1、给删除图标添加点击事件： <!-- 删除地址 --> <a href="javascript:;" class="addr-del-btn" @click="delAddress(index)"> <svg class="icon icon-del"> <use xlink:href="#ico 阅读全文

摘要： 我们可以看到所有的地址都是点亮的状态，就是外面都有个橙色的框。我们需要把默认地址，才设置为点亮的状态。 1、新建变量 checkedIndex，默认为 0，然后把遍历地址列表，把字段 isDefault 为 true 的地址索引赋值给 checkedIndex data() { return { c 阅读全文

摘要： 1、要求默认只展示3个地址，其他地址点击查看更多展开 通过使用过滤器，并定义变量 limit：3，然后循环渲染 addrFilter 数组 <li class="check" v-for="item in addrFilter" :key="item.addressId"> <script> exp 阅读全文

摘要： 1、在 pages 目录下，新建 Address.vue 文件，并引入头、尾和Modal组件： <template> <div> <nav-header></nav-header> <div class="nav-breadcrumb-wrap"> <div class="container"> < 阅读全文

摘要： 1、结算按钮 当选中商品时，按钮颜色有灰变红，并显示选中的商品总数量： <div class="btn-wrap"> <a :class="['btn', 'btn--red', checkedCount != 0 ? '' : 'btn--dis']">结算({{ checkedCount }}) 阅读全文