vue.js几行实现的简单的todo list

序：目前前端框架如：vue、react、angular，构建工具fis3、gulp、webpack等等......

可谓是五花八门，层出不穷，眼花缭乱。。。其实吧只要你想玩还是可以玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todo list.感觉确实方便~！~

预览戳这里

vuejs官方:http://cn.vuejs.org/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>todolist-vue</title><script src="src/vue.js"></script><style>*{list-style: none;outline: none;border: none;}#app{font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}.app{width: 90%;margin: 0 auto;background: #c5c5c5;padding: 5%;border: 1px solid #000;margin-top: 10px;}.app li.finished{text-decoration: line-through;}.typeInput input{width: 70%;font-size: 24px;border: 1px solid #000;padding-left:5px;}</style>
</head>
<body><div id="app" class="app"><h1 v-text='title'></h1><p class='typeInput'><input type="text" v-model='newText' v-on:keyup.enter='addNewlist'></p><ul><li v-for='item in items' v-bind:class='{finished:item.isFinished}' v-on:click='toggleFinish(item)'>{{item.text}}</li></ul></div><script>var app=new Vue({el:'#app',data:{title:'My todo list',items:[{text:'Learn CSS',isFinished:true},{text:'Learn javascript',isFinished:false}],newText:''},methods:{toggleFinish:function(item){// console.log(item.isFinished);item.isFinished=!item.isFinished;},//3、输入后按enter键盘的事件addNewlist:function(){var _self=this;//3.1 如果不为空就将刚刚输入的内容以对象的形式，追加到items数组对象内部，//默认新追加的是没完成的为falseif(_self.newText){_self.items.push({text:_self.newText,isFinished:false});}// console.log(_self.newText);// console.log(this);//3.2 同时清空input输入框_self.newText='';}}});</script>
</body>
</html>

目前只能输入按entry追加一个选项

本文转载自：http://www.cnblogs.com/-walker/p/6230651.html

转载于:https://www.cnblogs.com/Eton/p/6231079.html

vue.js几行实现的简单的todo list相关推荐

vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
vue js对象拷贝的方法简单易用
对象拷贝的方法是一个难点,尤其是深拷贝.建议把代码都运行下,帮助理解拷贝. 一. json方法适合情况: JSON对象的深度克隆.方法是先JSON.stringify() 转为json字符串, 再 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
Vue.js 2.5 发布，而这个会玩的团队已经自研出用 Vue 开发小程序的框架了
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...

vue.js几行实现的简单的todo list

vue.js几行实现的简单的todo list相关推荐

最新文章

热门文章