使用Vue.js完成一个todo-list
来源:互联网 发布:手机照片整理软件 编辑:程序博客网 时间:2024/06/06 07:45
使用Vue.js完成一个todo-list
首先分析一下页面的组成,要与一个供输入的用户输入框,然后下面应该是个列表,这个列表是用户的输入的内容的展示
页面结构:
<div id="todo-list-emp"> <input type="text" placeholder="Add a todo" v-model="newTodoText" v-on:keyup.enter="addNewTodo"> <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index, 1)"> </li> </ul> </div>
JavaScript部分:
Vue.component('todo-item', { template : '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>', props: ['title'] }); new Vue({ el : "#todo-list-emp", data : { newTodoText : '', todos : [ 'Do the dishes', 'Take out the trash', 'Mow the lawn' ] }, methods: { addNewTodo : function() { this.todos.push(this.newTodoText); this.newTodoText = ''; } } });
基本的样式:
input { width: 300px; height: 30px; border: 2px solid #DDDDDD; border-radius: 5px; font-size: 16px; color: rgba(0, 0, 0, 0.6); text-align: center; } input:hover { border: 2.5px solid #42B983; color: rgba(0, 0, 0, 0.7); } ul { padding: 0; margin-top: 15px; } ul li { width: 300px; height: 40px; line-height: 40px; color: rgba(0, 0, 50, 0.8); font-size: 22px; font-family: 'Lato', Calibri, Arial, sans-serif; list-style: none; border: 1px solid #333333; border-radius: 5px; text-align: center; } ul li + li { margin-top: 1px; } li button { font-size: 8px; line-height: 14px; background: #fff; border: 0; float: right; margin-right: 3px; color: rgba(0, 0, 0, 0.9); }
代码下载链接:http://download.csdn.net/detail/dear_mr/9839795
1 0
- 使用Vue.js完成一个todo-list
- vue.js实现的一个todo list
- Vue学习完成Todo List网页
- 【IMWeb训练营作业】 使用 Vue 实现一个 TODO List
- vue.js 实现 todo list 任务表单
- Vue.js实现一个todo-list的上移,下移,删除功能
- vue.js 实现 todo list 任务表单-2
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- vue.js 学习笔记 制作简单的todo list
- 用Vue搭建一个应用盒子(一):todo-list
- 学习 Vue.js 第一发【 todo list (IMWeb训练营作业)】
- 【IMWeb训练营作业】 vue.js todo list 作业(写作中...)
- Vue小案例—todo list
- VUE训练营——Todo List
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")
- IMweb训练营作业—-Todo List(vue)
- [IMWeb训练营作业]vue实现简单的todo list
- 关于微信支付的那些事
- React Native 初学-新建HelloWorldApp工程
- 企业级云管理平台的架构实现与落地实践、趋势分析
- NGUI根据点击按钮名字获取想要的值
- 如何进行CRC校验
- 使用Vue.js完成一个todo-list
- EventBus源码分析
- Linux-安装vsftp
- golang 令牌桶限速器实现(ratelimit)
- MySql 查询实例
- 蓝桥杯 带分数
- Eclipse快捷键
- 性能测试方案设计的方法和思路
- Dubbo消费者无法连接到生产者提供的服务