vue.js實(shí)現(xiàn)備忘錄demo
更新時間：2019年06月26日 09:31:34 作者：liuting9612
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)備忘錄的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(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ù)完成時，勾選多選框后的樣式*/
.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)聽鍵盤回車事件-->
<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長度為0時顯示暫無任務(wù)-->
<p v-if="list.length===0" style="position:relative;left:20px;top:20px;color:#AAAAAA">暫無任務(wù)</p>
<!--用v-for遍歷輸出任務(wù)數(shù)組中的任務(wù)-->
<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>
<!--刪除按鈕：點(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js實(shí)現(xiàn)價格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
這篇文章主要介紹了Vue3的vue-router超詳細(xì)使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下2023-02-02
詳解Vue里循環(huán)form表單項(xiàng)實(shí)例
本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項(xiàng)目時安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
Nuxt.js結(jié)合Serverless構(gòu)建無服務(wù)器應(yīng)用
Nuxt.js是一個基于Vue.js的框架,結(jié)合Serverless架構(gòu),Nuxt.js可以讓你構(gòu)建高度可擴(kuò)展、成本效益高的無服務(wù)器應(yīng)用,具有一定的參考價值,感興趣的可以了解一下2024-08-08
echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯誤的解決
這篇文章主要介紹了Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01