vue.js 實現 todo list 任務表單
阿新 • • 發佈：2019-02-19
---------------------------------------
有關點選複選框 未完成數字的變化 bug 已經修復
新增
clickInput: function(lsi){
var om = this.items.indexOf(lsi); //獲取相應的索引值
if(this.items[om].isChecked)
{ //如果選中未完成任務減一 否則加一
this.num = this.num-1;
}
else
{
this.num = this.num+1;
}
},
-----------------------------------------
今天在騰訊課堂學習關於用vue.js 製作todo list 任務表單 然後自己寫了一遍，用來加強記憶和總結
-------------------------------------------------------------
如果有錯誤 望指正 ps;反正我執行時沒有錯誤
部分功能還未實現 後續將新增
----------------------------------------------------------
html 原始碼
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>todo list</title> <link rel="stylesheet" type="text/css" href="./todo-list.css" /> </head> <body> <div id="head"> 任務計劃列表 </div> <div id="main"> <div class="name">新增任務</div> <!-- 新增鍵盤事件 並將input的value值 用intext獲取 --> <input type="text" v-model='intext' v-on:keyup.enter='addList' /> <!-- 新增隱藏的指令 並給出依據 show show不等於0時展示 --> <div class="task" v-show="show"> <span><i v-text="num"></i>個任務未完成</span> <div class="task_type"> <a href="javascript:void(0)">所有任務</a> <a href="javascript:void(0)">未完成任務</a> <a href="javascript:void(0)">完成任務</a> </div> </div> <div class="list"> <ul> <!-- 迴圈產生li標籤及其內部標籤 並判斷是否有內容 沒有則不展示 因為在初始化時會產生一個空標籤所以才會判斷 以免產生空任務 --> <li v-for='item in items' v-show='item.text' > <!-- 動態新增class 當點選選中時新增hidd 目的是顯示覆選框和刪除 input 的選擇中狀態由 ischecked 的值決定 --> <div id="box"><input type="checkbox" :class='{hidd:item.isChecked}' v-model='item.isChecked' v-on:click='clickInput(item)'/></div> <!-- class和前面一樣裡面包含選中時出現刪除線 標籤內的內容由text決定 而text由輸入內容決定 --> <span v-on:click='clickselect(item)' :class='{hidd:item.isChecked}' >{{item.text}}</span> <!-- class相同 新增點選刪除函式 並且函式接受當前的item，由於去判斷在陣列中的索引 確定位置 --> <a href="javascript:void(0)" :class='{hidd:item.isChecked}' v-on:click='deletList(item)'>刪除</a> </li> </ul> </ul> </div> </div> <script type="text/javascript" src='./vue.js'></script> <script type="text/javascript" src='./todo-list.js'></script> </body> </html>
js 原始碼
// 例項化 var main = new Vue({ el:"#main", data:{ items:[ {text:null , isChecked:false }, // ischecked 判斷是否被選中 ], intext:'請輸入任務', show: 0, // 新增判斷是否展示輸入框下的工作列依據 初始為0 不展示 num: 0, // 判斷未完成的任務數量 初始為0 即沒有新增任何任務時 }, methods:{ // 新增任務函式 addList: function(){ console.log(this.intext); console.log(this.items[0].text); if(this.intext.length!=0) // 判斷輸入框是否有輸入內容 { this.items.push({ text: this.intext, // 將輸入內容新增到 items.text內 isChecked:false, // 使剛輸入的未被選中 （注意即使不新增這句也會不選中 // 但是陣列items內相應位置就不會出現ischecked 會使後面需要選中時出現問題） }); this.show = this.show+1; //每新增一個任務 任務的總個數加一 this.num = this.num+1; // 每新增一個任務 未完成任務的總個數加一 } // 清空輸入框內容 this.intext = ''; }, // 點選文字選中複選框 clickselect:function(lsi){ console.log(this.items.indexOf(lsi)); var om = this.items.indexOf(lsi); //獲取相應的索引值 this.items[om].isChecked = !this.items[om].isChecked; // 當點選相應任務時 // 選擇的狀態發生改變 if(this.items[om].isChecked) { //如果選中未完成任務減一 否則加一 this.num = this.num-1; } else { this.num = this.num+1; } },
clickInput: function(lsi){ //新增點選input標籤時 num 也變化 var om = this.items.indexOf(lsi); //獲取相應的索引值
if(this.items[om].isChecked)
{ //如果選中未完成任務減一 否則加一 this.num = this.num-1;
}
else
{
this.num = this.num+1;
}
},
// 點選刪除
deletList: function(lsi){
var om = this.items.indexOf(lsi);
// this.items[om].text=''; //這樣並沒有完全從陣列清除
// 當點選刪除時 未完成任務數量變化
// 變化依據任務是否已經被選中而變化
// 不能將移出陣列先執行 這樣就會導致無法判斷是否之前已經被選中
if( this.items[om].isChecked == true)
{
this.num = this.num;
}
else
{
this.num = this.num-1;
}
this.show= this.show-1; // 任務總數減一 如果總數等於0時 隱藏
this.items.splice(om,1); // 移出相應任務
}
}
})css 原始碼
body{padding: 0;margin:0; font-size: 14px; font-family: '微軟雅黑';}
ul,li,a,div,input,span {padding: 0; margin:0;}
a{text-decoration: none; color: #000;}
ul,li {list-style-type: none;}
/*頂部佈局*/
#head {
width: 100%;
height: 50px;
font-size: 18px;
font-weight: bold;
line-height: 50px;
text-align: center; }
#main {
width: 400px;
margin:5px auto;
}
#main .name {
font-size: 16px;
font-weight: bold;
}
#main input {
width: 400px;
height: 35px;
outline: none;
}
#main .task{
margin:10px 0;
height: 32px;
overflow: hidden;
line-height: 32px;
}
#main .task span {
display: block;
height: 30px;
float: left;
}
#main .task .task_type{
float: right;
}
#main .task .task_type a{
display: block;
height: 30px;
padding: 0 5px;
line-height: 30px;
border:1px solid #ccc;
text-decoration: center;
float: left;
margin-left: 10px;
}
#main .list {
width: 400px;
clear: both;
}
#main .list ul{
width: 400px;
}
#main .list ul li {
width: 400px;
height: 30px;
line-height: 30px;
display: block;
overflow: hidden;
}
#main .list ul li #box {
float: left;
width: 16px;
height:16px;
margin:7px 0;
}
#main .list ul li input{
display: none;
width: 16px;
height:16px;
}
#main .list ul li:hover a{
display: block;
}
#main .list ul li:hover input{
display: block;
}
#main .list ul li .hidd {
display: block;
color: #ccc;
text-decoration: line-through;
}
#main .list ul li span {
display: block;
float: left;
margin-left: 20px;
}
#main .list ul li a{
display: none;
float: left;
margin-left: 20px;
}
下面是我執行的介面
剛進入介面
新增第一個任務
滑鼠懸停
單擊選中
單擊刪除
-----------------------------------------------------------------
原諒我還不太會用csdn
-------------------------------------------------------------------