vue.js實現(xiàn)備忘錄demo
更新時間：2019年06月26日 09:31:34 作者：liuting9612
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)備忘錄的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js實現(xiàn)備忘錄demo的具體代碼，供大家參考，具體內容如下
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style>
/*當任務完成時，勾選多選框后的樣式*/
.finish{
text-decoration:line-through;
color:#aaabac;
}
</style>
</head>
<body>
<div id="app">
<!--輸入框：v-model用于將輸入內容跟content進行數(shù)據(jù)綁定，keydown.enter用于監(jiān)聽鍵盤回車事件-->
<input type="text" v-model="task.content" placeholder="edit" @keydown.enter="addTask">
<!--任務列表顯示區(qū)域-->
<div id="list">
<!--用v-if判斷當前是否有任務，任務數(shù)組list長度為0時顯示暫無任務-->
<p v-if="list.length===0" style="position:relative;left:20px;top:20px;color:#AAAAAA">暫無任務</p>
<!--用v-for遍歷輸出任務數(shù)組中的任務-->
<div id="unit" v-for="(item,index) in list" >
<!--多選框的click事件監(jiān)聽狀態(tài)（是否勾選）的改變-->
<input type="checkbox" @click="changeState(index)" >
<!--動態(tài)添加樣式class='finish'-->
<span :class="{'finish':item.finished}">{{ index+1 }}.{{ item.content }}</span>
<!--刪除按鈕：點擊按鈕執(zhí)行deleteTak函數(shù)，需要注意要傳入索引值刪除指定任務-->
<button style="background:red;color:white;" @click="deleteTask(index)">delete</button>
</div>
</div>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
task:{
content:'',
finished:false,
// deleted:false,
},
list:[],
addTask(){
this.list.push(this.task);
this.task={
content:'',
finished:false,
// deleted:false,
}
},
changeState(index){
let nowState=this.list[index].finished;
this.list[index].finished=!this.list[index].finished;
},
deleteTask(index){
this.list.splice(index,1);
}
},
});
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了解析Vue2 dist 目錄下各個文件的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue3+typeScript穿梭框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
Vue3.0結合bootstrap創(chuàng)建多頁面應用
這篇文章主要介紹了Vue3.0結合bootstrap創(chuàng)建多頁面應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue+px2rem實現(xiàn)pc端大屏自適應的實例代碼(rem適配)
不管是移動端的適配,還是大屏需求,都離不開不一個單位rem,rem是相對于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關于vue+px2rem實現(xiàn)pc端大屏自適應的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue自定義指令及使用，對Vue感興趣的同學，可以參考下2021-05-05
vue3使用localStorage實現(xiàn)登錄注冊功能實例
這篇文章主要給大家介紹了關于vue3使用localStorage實現(xiàn)登錄注冊功能的相關資料, localStorage這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue調用語音播放的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
最近遇到一個需求,需要把內容下載生成pdf文件,但轉換過程中內容總是會被截斷,就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關于vue生成pdf文件步驟及pdf分頁隔斷處理的相關資料,需要的朋友可以參考下2024-02-02
下面小編就為大家分享一篇vue 每次渲染完頁面后div的滾動條保持在最底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03