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>
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
