使用Vue.js完成一个todo-list
2017-05-11 16:52
686 查看
使用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)">< 4000 /span> </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
相关文章推荐
- Vue.js实现一个todo-list的上移,下移,删除功能
- Vue.js实现一个todo-list的上移下移删除功能
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 分享一个使用 vue.js 开发的网站
- 使用angular.js开发的一个简易todo demo
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 用Vue搭建一个应用盒子(一):todo-list
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- 使用 Vue.js 制作一个简单的调查问卷平台
- 使用vue.js路由踩到的一个坑Unknown custom element
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 使用js数组和事件完成的一个小玩意儿
- Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")
- 使用 Vue.js 制作一个简单的调查问卷平台
- Vue.js插件axios——封装一个可以灵活使用的ajax
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 使用Vue.js创建一个时间跟踪的单页应用
- 请写一个简单的幻灯效果页面,不使用JS来完成怎么做
- JS使用google地图API完成一个完整地图应用