**

课程代码素材

** main.js中的代码

import Vue from 'vue' import App from './App.vue' //1、导入ant-design-vue 组件库 import Antd from 'ant-design-vue' //2、导入组件库的样式表 import 'ant-design-vue/dist/antd.css' Vue.config.productionTip = false //3、安装组件库 Vue.use(Antd) new Vue({ render: h => h(App) }).$mount('#app')

app.vue中的代码

<template> <div id="app"> <a-input placeholder="请输入任务" class="my_ipt" /> <a-button type="primary">添加事项</a-button> <a-list bordered :dataSource="list" class="dt_list"> <a-list-item slot="renderItem" slot-scope="item"> <!-- 复选框 --> <a-checkbox>{{ item.info }}</a-checkbox> <!-- 删除链接 --> <a slot="actions">删除</a> </a-list-item> <!-- footer区域 --> <div class="footer" slot="footer"> <span>0条剩余</span> <a-button-group> <a-button type="primary">全部</a-button> <a-button>未完成</a-button> <a-button>已完成</a-button> </a-button-group> <a>清除已完成</a> </div> </a-list> </div> </template> <script> export default { name: "app", data() { return { list: [ { id: 0, info: "Racing car sprays burning fuel into crowd.", done: false, }, { id: 1, info: " Japanese princess to wed commoner.", done: false, }, { id: 2, info: "Australian walks 100km after outback crash.", done: false, }, { id: 3, info: "Man charged over missing wedding girl.", done: false, }, { id: 4, info: "Los Angeles battles huge wildfires.", done: false, }, ], }; }, }; </script> <style scoped> #app { padding: 10px; } .my_ipt { width: 500px; margin-right: 10px; } .dt_list { width: 500px; margin-top: 10px; } .footer { display: flex; justify-content: space-between; align-items: center; } </style>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。