49 lines
1.1 KiB
Vue
Executable File
49 lines
1.1 KiB
Vue
Executable File
<template>
|
|
<div class="hello">
|
|
<input type="text" placeholder="请输入备忘内容" v-model="UserInput">
|
|
<button @click="Submit">提交</button>
|
|
<ul v-if="ListArr.length != 0">
|
|
<li v-for="(item,index) in ListArr" :key="index">
|
|
{{ index + 1 }}: {{ item }}
|
|
<span @click="deleteItem(index)"> x</span>
|
|
</li>
|
|
</ul>
|
|
<div v-else>
|
|
没有数据...
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HelloWorld',
|
|
data () {
|
|
return {
|
|
UserInput: null,
|
|
ListArr: []
|
|
}
|
|
},
|
|
created () {
|
|
if (localStorage.getItem('note') != null) {
|
|
this.ListArr = JSON.parse(localStorage.getItem('note'))
|
|
}
|
|
},
|
|
methods: {
|
|
Submit () {
|
|
this.ListArr.push(this.UserInput)
|
|
this.UserInput = null
|
|
localStorage.setItem('note', JSON.stringify(this.ListArr))
|
|
},
|
|
deleteItem (index) {
|
|
this.ListArr.splice(index, 1)
|
|
localStorage.setItem('note', JSON.stringify(this.ListArr))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
|
|
</style>
|