demo
This commit is contained in:
parent
813f3d975d
commit
b317e10a83
GPG Key ID:
A7972FD973317FF3
78
src/App.vue
78
src/App.vue
@ -1,28 +1,82 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div class="app">
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
<div>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<button @click="isok = false">未完成</button>
|
||||||
|
<button @click="isok = true">已完成</button>
|
||||||
|
</div>
|
||||||
|
<div v-show="!isok">
|
||||||
|
<div v-for="(item,index) in list" :key="index" v-show="item.isok == false">
|
||||||
|
<input type="checkbox" name="list" @click="setstate(index)" v-bind:id="'f-' + index" :checked="item.isok" /><label :for="'f-' + index" @click="setstate(index)">{{item.name}}</label><button v-on:click="remove(index)">删除</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="isok">
|
||||||
|
<div v-for="(item,index) in list" :key="index" v-show="item.isok == true">
|
||||||
|
<input type="checkbox" name="list" @click="setstate(index)" :id="'t-' + index" :checked="item.isok" /><label @click="setstate(index)" :for="'t-' + index">{{item.name}}</label><button @click="remove(index)">删除</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
添加任务：<input type="text" v-model="todoname" @keyup.enter="add" /><button @click="add">添加</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
HelloWorld
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isok:false,
|
||||||
|
list:[{
|
||||||
|
name:"默认代办",
|
||||||
|
isok:false
|
||||||
|
}],
|
||||||
|
todoname:"",
|
||||||
|
time:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
add(){
|
||||||
|
this.list.push({name: this.todoname,isok: false});
|
||||||
|
this.todoname = "";
|
||||||
|
localStorage.setItem("list",JSON.stringify(this.list))
|
||||||
|
},
|
||||||
|
remove(index){
|
||||||
|
this.list.splice(index,1),
|
||||||
|
localStorage.setItem("list",JSON.stringify(this.list))
|
||||||
|
},
|
||||||
|
setstate(index){
|
||||||
|
if(this.time){
|
||||||
|
clearTimeout(this.time)
|
||||||
|
this.time = 0;
|
||||||
|
}
|
||||||
|
this.time = setTimeout(()=>{
|
||||||
|
this.list[index].isok = !this.list[index].isok;
|
||||||
|
this.$forceUpdate();
|
||||||
|
localStorage.setItem("list",JSON.stringify(this.list))
|
||||||
|
|
||||||
|
},100)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
let list = localStorage.getItem("list");
|
||||||
|
this.list = list ? JSON.parse(list) : [{
|
||||||
|
name:"默认代办",
|
||||||
|
isok:false
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
.app{
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
display: flex;
|
||||||
-webkit-font-smoothing: antialiased;
|
flex-direction: column;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
align-items: center;
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user