Vue2鍵盤事件：keydown/keyup... Vue2鍵盤事件：keydown/keyup... - Lonely,lonelyBurning - 部落格園
VS Code 代碼快速格式化快捷鍵 https://jingyan.baidu.com/article/75ab0bcbaf1c04d6864db22f.html
Vue中watch的詳細用法 Vue中watch的詳細用法
Vue2.0入門項目 SD-Gaming/Vue2.0_to_do_list-addName-
1.重新整理不丢失
2.輸入後增加到清單
3.點選變色
testa.js
const STORAGE_KEY = 'studentNamesKey'
export default {
queryData: function() {
return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY)
|| '[]')
},
saveData:function(items) {
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試執行個體 - 菜鳥教程(菜鳥教程 - 學的不僅是技術，更是夢想！)</title>
<script type="module">
import Storage from './testa.js';
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!',
itemNew: '',
items: Storage.queryData()
},
methods: {
addNew: function () {
this.items.push({
name: this.itemNew,
colorFlag: false
});
//清空文本欄
this.itemNew = null;
},
turnRed: function (item) {
//逆反布爾值
item.colorFlag = !item.colorFlag;
}
},
watch: {
items: {
handler: function (items) {
Storage.saveData(items);//監控li變化，将新增的值存入 sessionStorage 裡
}, //sessionStorage 裡的資料将在頁面關閉後删除
deep: true //深度監視，隻要 items 有一點改變就會觸發回調函數handler
}
}
})
</script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.colorSwitch {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1 v-html="msg"></h1>
<input type="text" v-model="itemNew" v-on:keyup.enter="addNew" />
<ul>
<li v-for="item in items" v-on:click="turnRed(item)" v-bind:class="{colorSwitch:item.colorFlag}">
{{item.name}}
</li>
</ul>
</div>
</body>
</html>
