vue 实现类似购物车的小demo
vue 实现类似购物车的小demo（稍作修改可用于购物车和已处理和未处理的应用场景）
话不多说 直接上代码 demo没有写css （数据本地存储localStorage.setItem('lists',JSON.stringify(this.lists)) ;）避免每次刷新数据丢失
<template>
<div>
<input type="text" v-model="vals" @keyup.enter="addOne($event)"/>
<button @click="addOne()">add one</button>
<br />
<br />
<hr />
<h3>未完成</h3>
<li v-for="(item,index) in lists" v-if="!item.checked">
<input type="checkbox" @click="rem(index)" v-model="item.checked" @change="ch()"/>
{{index }}------{{ item.message }}------{{ item.age }}
------- <button @click="del(index)">删除</button><br />
</li>
<h3>已完成</h3>
<li v-for="(item,index) in lists" v-if="item.checked">
<input type="checkbox" @click="rem(index)"v-model="item.checked" @change="ch()"/>
{{index }}------{{ item.message }}------{{ item.age }}
------- <button @click="del(index)">删除</button><br />
</li>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
vals:'',
he:false,
lists:[{message: 'Foo' ,
age:10,
check:true,
},
{ message: 'Doo' ,
age:50,
check:false,
}
]
}
},
methods: {
addOne: function(e){
this.lists.push({
message:this.vals,
age:12,
});
this.vals='';
localStorage.setItem('lists',JSON.stringify(this.lists)) ;
},
del: function (index) {
this.lists.splice(index, 1);
localStorage.setItem('lists',JSON.stringify(this.lists)); /* 加入本地缓存* /
},
rem: function (index) {
localStorage.setItem('lists',JSON.stringify(this.lists)); /* 加入本地缓存* /
},
ch:function(){ /* 每次按钮发生改变 也加入本地缓存 避免刷新后不是自己的 之前的标记内容* /
localStorage.setItem('lists',JSON.stringify(this.lists));
}
},mounted(){
var lists=JSON.parse(localStorage.getItem('lists'));
if(lists){
this.lists=lists;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
纯属自己写的小demo 不喜勿喷 谢谢