(1). AllList.vue组件 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 <template><!--给子组件ListItem绑定事件,例如:todo,checkTodo,在ListItem组件中需要使用props进行声明接收后即可使用--><ListItem v-for="todoObj in todos":key="todoObj.id":todo="todoObj":checkTodo="checkTodo":dele...
既然已经拆分好组件了,就可以去vue项目里面写我们的组件了,创建、导入、注册三步曲完成 接下来应该有我们的静态模板了,是这样的,一般情况下我们的一个项目大多数已经完成了一些了,所以不会从零开始,这个时候老板派给你个任务叫你把这个实现组件化开发,你就直接把html先一股脑的塞到App.vue里面,可以启动服务器看到...
通过input添加数据并且输出到todoList任务项 鼠标移入移出时删除按钮的显示效果和删除单个todoList任务项 todoList任务条目的全选、全不选,和相应的删除操作 数据本地存储化 通过localStorage完成在本地的数据存储,在该todoList中的数据来源于todotasks 在localStoage存储的数据以key:value的形式存在 写入数据到localStorge...
case 1:this.newList=this.prolist;break; case 2:this.newList=this.prolist.filter(function(item){return item.status});break; case 3:this.newList=this.prolist.filter(function(item){return !item.status});break; } }, /*改变单条数据的完成状态*/ changeType(index){ this.newList[index].stat...
本文的所有代码在nodejh/vue2-tutorials。 最终实现效果如下: 接下来就一一实现。 nodejh/vue2-tutorials初始化项目 同样使用vue-cli初始化项目,直接回车就好了。 $ vue init webpack todoListDemo $ cd todoListDemo $ npm install $ npm run dev
输入vue -V检测vue是否装好 步骤 1:进入d盘 创建一个项目 vue create todolist 这里需要注意一下 要选择Manually select features 等待命令执行 这个时候会发现d盘多了一个文件夹todolist 2:使用vscode打开todolist 在终端运行命令npm run serve 项目创建启动成功 可以在浏览器里面查看 这个时候就可以开始造代码了 ...
Vue实现todoList(任务计划列表) 大致功能: 1、在输入框中输入内容后按enter键,即可把内容添加到下面的列表中(如果内容为空则不添加) 2、动态计算有几个未完成的任务 3、点击复选框,实现选中或不选中效果(即完成或未完成) 4、鼠标移入列表,会出现一个删除按钮,点击删除按钮即可删除该列表...
vue-todolist 基于Vue的TodoList示例,麻雀虽小,五脏俱全 技术栈 Vue + localStorage + hash 功能描述(使用说明) 添加备忘录(输入标题后回车添加,如果内容为空或只有空格会清空,什么都不添加) 删除备忘录(点击标题后面的叉) 完成备忘录(点击标题前面的复选框) ...
MyTodoHeader头部组件: <template> </template> import { v4 as uuidv4 } from 'uuid' export default { props: { }, data () { return { title: '' } }, methods: { } } .todo-header-box{ width: 500px; height: 40px; margin-...
todoList:[], isdo:true, } }, methods:{//用于放置自定义方法 addObj(){ if(!Object.is(this.todo,'')){ let obj={}; [obj.todo,obj.isdo]=[this.todo,this.isdo]; this.todoList.push(obj); } this.todo=''; localStorage.setItem('history',JSON.stringify(this.todoList));//将'this...