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