v-for="todoObj in todos":key="todoObj.id":todo="todoObj":checkTodo="checkTodo":deleteTodo="deleteTodo"/></template>//引入ListItem组件importListItemfrom"./ListItem"exportdefault{//给组件命名为AllListname:'AllList',//在当前组件内注册子组件: ListItemcomponents:{ListItem},//props用于接收App组...
//如果数组长度为0,页面底部属性隐藏{{ length > 0 ?`剩余 ${length}` : `全部完成`}}computed : {//创建监视属性,因为我们不需要对页面进行修改,可以节省创建length () {returnthis.list.filter(i => i.isDone ===false).length//求出未完成数组的长度}, show () {//console.log()returnthis.list...
--鼠标移入li为按钮增加显示样式,移出隐藏-->{{thingtitle}}删除data(){ return { // 删除按钮默认隐藏 isShow: 'display:none' } } /* 浮动到li时高亮背景*/ li button { float: right; /* display: none; */ margin-top: 3px; } li:hover { background-color: #DDDDDD; } 实现删除操作 在A...
store.save("storeData",this.list); }, deep:true } }, methods:{ enterFn(ev){//添加任务 //向list中添加一项任务 //事件处理函数中的this指向的是当前这个根实例 if(this.todo==""){return;} this.list.push({ title:this.todo, isComplete:false }); this.todo = ""; }, delFn(item){//...
MyList.vue文件 <template><MyItem/><MyItem/></template>// 引入子组件importMyItemfrom"@/components/MyItem";exportdefault{name:"MyList",components:{MyItem}// 注册子组件}.todo-main{margin-left:0;border:1pxsolid#ddd;border-radius:2px;padding:0;}.todo-empty{height:40px;line-height:40px;bo...
vue init webpack todolist // todolist是项目名称 创建成功以后 进入项目里面安装依赖运行 cd todolist npm install // yarn 或 cnpm install npm run dev 2、如果使用的HBuilder开发工具,可以直接在工具中创建项目 点击左上角的文件->新建->项目 输入名称,选好文件夹,点击创建就可以了 ...
Vue3--使用脚手架创建一个vue应用,实现todolist,一、安装脚手架,运行项目1.1安装,运行首先安装16.0或更高版本的 Node.js然后在cmd安装并执行create-vue它是Vue官方的项目脚手架工具npminitvue@latest可以选装一些功能组件,或者不装,在项目被创建后,通过以下步骤安装
Vue3.0实现todolist(Vue3.0环境搭建) 准备工作 1、官网安装node,进入node.js官网安装长期支持版 打开终端输入:node -v 如果出现node版本号,表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org输入cnpm -v ...
步骤 1:进入d盘 创建一个项目 vue create todolist 这里需要注意一下 要选择Manually select features 等待命令执行 这个时候会发现d盘多了一个文件夹todolist 2:使用vscode打开todolist 在终端运行命令npm run serve 项目创建启动成功 可以在浏览器里面查看 这个时候就可以开始造代码了 ...
如何使用Vue实现todolist 这篇文章主要介绍了如何使用Vue实现todolist,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 一、使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法:...