vue.js實現的一個todo list
效果圖如下:
在輸入框中輸入內容,會在下面顯示,點選內容會填加下劃線,點選刪除按鈕可以刪除這條資訊。下面是html程式碼
<div id="app">
<h1 v-html="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew()" />
<ul>
<li v-for="item in items">
<input type="button" value="刪除" v-on:click ="deleteTask(item)" />
<span v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</span>
</li>
</ul>
</div>
js程式碼
const STORAGE_KEY = 'todos-vuejs'
function fetch() {
return JSON.parse(window.localStorage.getItem(
STORAGE_KEY) || '[]' )
}
function save(items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
new Vue({
el: '#app',
data: function() {
return {
title: 'this is a todo list',
items: fetch(),
newItem: ''
}
},
watch: {
items: {
handler: function (items) {
save(items)
},
deep: true
}
},
methods: {
toggleFinish: function(item) {
item.isFinished = !item.isFinished
},
addNew: function() {
this.items.push({
label: this.newItem,
isFinished: false
})
this.newItem = ''
},
deleteTask: function(item) {
this.items.splice(this.items.indexOf(item), 1)
}
}
});
相關推薦
Vue.js實現一個todo-list的上移,下移,刪除功能
如圖,A simple todo-list長這樣 這是一個基於vue.js的一個簡單的todo-list小demo。首先要實現新增非空list,點選list切換finished狀態這樣的一個效果,推薦學習地址---->點選開啟連結 接下來是實現的一個上移,下移,刪除
vue.js實現一個計算器
為了學習vue.js,把一個基於js實現的計算器轉換為vue.js單頁應用模式。 此次實操旨在學會運用vue.js,不注重計算器的樣式,邏輯 先簡單的看一下基於js實現的計算器是怎樣的 1、html //只擷取body裡面的內容 &l
vue.js實現的一個todo list
效果圖如下: 在輸入框中輸入內容,會在下面顯示,點選內容會填加下劃線,點選刪除按鈕可以刪除這條資訊。下面是html程式碼 <div id="app"> <h1 v-ht
vue.js 實現 todo list 任務表單
--------------------------------------- 有關點選複選框 未完成數字的變化 bug 已經修復 新增 clickInput: function(lsi){ var om = this.items.indexOf
Vue.js 的一個小技巧---利用v-for中的index值,來實現隔行變色
type 樣式 lin class idt title mes har oct 首先定義好樣式,利用v-for中的index值,然後綁定樣式來實現隔行變色效果。 以下為完整代碼,很簡單,但也是個技巧。 <!DOCTYPE html> &
flex佈局+vue.js實現的一個投骰子的功能
1、直接貼程式碼吧。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src
鴻蒙系統應用開發之JS實現一個簡單的List
在之前的文章[鴻蒙應用開發之怎麼更好的遠端連線手錶模擬器做除錯](https://harmonyos.51cto.com/posts/1624#bky)裡我運行了一個穿戴裝置的應用,利用JS UI實現了一個最簡單的HelloWorld。 今天我打算在智慧屏裝置上利用豆瓣音樂的介面資料實現一個簡單的List介
vue.js實現數據動態響應(Vue.set的應用)
屬性 點擊 屬性。 沒有 log utf-8 創建 http for 在vue裏面,我們操作最多的就是各種數據,在jquery裏面,我們習慣通過下標定向找到數據,然後重新賦值 比如var a[0]=111;(希望上家公司原諒菜鳥的我寫了不少這樣的代碼??) 下面上代碼
【前端】vue.js實現按鈕的動態綁定
case ctype html 們的 ast pre cal 防止 得到 vue.js實現按鈕的動態綁定 實現效果: 實現代碼以及註釋: <!DOCTYPE html> <html> <head> <title>按鈕
vue.js實現單選框、復選框和下拉框
new type 方式 避免 -- js實現 處理 scrip 按鈕 Vue.js可以很方便的實現數據雙向綁定,所以在處理表單,人機交互方面具有很大的優勢。下邊以單選框、復選框和下拉框為例介紹他們在HTML和Vue.js中的具體實現方式。 一、單選框 在傳統的HTML
vue.js實現點擊後動態添加class及刪除同級class
變色 點餐 tail itl 需要 name .cn 好用 get 最近使用vue需要實現一個點餐選擇商品規格的頁面,需要通過vue動態的給被點擊的元素添加class名字,使其變色,其他的刪除class。如圖: 開始在網上找了許多辦法發現不是太好用,最後找到一個發現還是不
VUE.JS實現購物車功能
add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能,可以讓用戶一次性購買多個商品,常見的購物車實現方式有如下幾種: 1. 用戶更新購物車裏的商品後,頁面自動刷新。 2. 使用局部刷新功能,服務器端返回整個購物
使用vue.js實現checkbox的全選和多個的刪除功能
ons eth table padding ted rip fun lpad let 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
6 Vue.js實現loading1
blog .com 技術 vue vue.js js實現 div 9.png 圖片 1 2 3 4 5 5 6 7 6 Vue.js實現loading1
vue.js實現頁面倒計時跳轉功能
his 首頁 turn return () data col world mit 需求分析: 頁面倒計時5秒後進入系統主頁,數字需要實時更新! <template> <div class=""> <h1>歡迎來到Vue.js
vue.js 是一個怪東西
action body 通過 obj bject push 是個 data 綁定 vue雙向綁定的條件 1.必須添加到pageData的屬性上並且指明類型 new Vue({ el:"body", data:pageData }) pageData.tmpActio
vue.js 實現點擊展開收起動畫
tar 通過 blog ext mar document ML 收起 dea 最近公司項目加了個頁面,其中要求是這樣的,點擊對應列表,展開和收起, 其實就是顯示和隱藏內容部分;說來慚愧,我花了半天時間才搞出來(自黑一下~), ,,接下來分享給大家,先上效果圖: .
基於vue.js實現遠程請求json的select控件
返回 oct ttr method IT ams 請求 pub 渲染 基本思路 前端把需要的參數類型編碼傳到後臺,後臺返回相應的參數列表json,前端利用vue渲染select控件 具體實現 前端代碼 <select v-model="template.typ
原生js實現一個DIV的碰撞反彈運動
絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動: 關鍵在於DIV的邊界檢測,進而改變運動方向,即可實現碰撞反彈效果。 <!DOCTYPE html> <html
js 實現一個普通的定時器
時間 javascrip 調用 button size code get star lang HTML的頁面顯示: 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8">