您的位置：首页 > 产品设计 > UI/UE

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

2016-12-28 19:32 721 查看

序：目前前端框架如：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数组对象内部，
//默认新追加的是没完成的为false
if(_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追加一个选项，未完待续...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航