个人理解简写
<template>
<div id="app">
<input type="text" v-model="textmode"><br />
<button v-on:click="setListA()">提交未办理信息</button>
<hr />
<h1>未办理的事情</h1>
<table border="" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in lista">
<td>{{item}}</td>
<td>{{key}}</td>
<td><button v-on:click="setOver(key)">完成</button></td>
</tr>
</table>
<hr />
<h2>已完成事项</h2>
<table border="" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in listb">
<td>{{item}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteindex(key)">删除</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
textmode:'',
lista:[],
listb:[]
}
},methods:{
setListA(){
this.lista.push(this.textmode);
this.textmode="";
},
setOver(key){
var str = this.lista[key];
this.lista.splice(key,1);
this.listb.push(str);
},
deleteindex(key){
this.listb.splice(key,1);
}
}
}
</script>
活用V-MODEL标签
V-IF的基本使用
<template>
<div id="app">
<h1 v-if="booleanpar">booleanpar是true</h1>
<h1 v-if="!booleanpar">booleanpar是false</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
booleanpar: true ,
}
},methods:{
}
}
</script>双向数据绑定小示例
<template>
<div id="app">
<input type="text" v-model="textmodel" v-on:keydown="setList($event)"/>
<button v-on:click="setList($event)">提交未来想要做的事</button>
<hr>
<h1>想要做的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="!item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">删除此内容</button></td>
</tr>
</table>
<hr />
<h1>已完成的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">删除此内容</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
textmodel:'',
list:[]
}
},methods:{
setList(e){
console.log(e.keyCode)
if(e.keyCode==13||e.keyCode==undefined){
if(this.textmodel!=''){
var textbean = new Object;
textbean.text = this.textmodel;
textbean.stuats = false;
this.list.push(textbean);
this.textmodel='';
}
}
},
deleteKey(key){
this.list.splice(key,1);
}
}
}
</script>简单缓存数据(利用localStorage.setItem设置缓存值)
<template>
<div id="app" class="bodydiv">
<input type="text" v-model="textmodel" v-on:keydown="setList($event)"/>
<button v-on:click="setList($event)">提交未来想要做的事</button>
<hr>
<h1>想要做的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="!item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">删除此内容</button></td>
</tr>
</table>
<hr />
<h1>已完成的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">删除此内容</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
textmodel:'',
list:[],
}
},methods:{
setList(e){
console.log(e.keyCode)
if(e.keyCode==13||e.keyCode==undefined){
if(this.textmodel!=''){
var textbean = new Object;
textbean.text = this.textmodel;
textbean.stuats = false;
this.list.push(textbean);
this.textmodel='';
//JSON.stringify(this.list)把对象转成字符串
localStorage.setItem('list',JSON.stringify(this.list));
}
}
},
deleteKey(key){
this.list.splice(key,1);
localStorage.setItem('list',JSON.stringify(this.list));
}
},mounted(){
//和data，methods同级
/*生命周期函数,页面刷新时执行*/
var list = JSON.parse(localStorage.getItem('list'));
//判断获取的值是否为空，不为空付给参数
if(list){
this.list = list;
}
}
}
</script>但是这样设置的话，内容是缓存到了，但是点击checkbox变换他的状态，并没有记录下来，所以他一直是存入的初始化给他的stutas
所以说要在当状态改变时也要往缓存里存入一遍值
<td><input type="checkbox" v-model="item.stuats" v-on:change="saveList()"></td>
saveList(){
localStorage.setItem('list',JSON.stringify(this.list));
} 这样虽然实现了 ，但是 里面有了三条重复的代码，localStorage.setItem('list',JSON.stringify(this.list));
也许我们可以把他封装一下
——————————————————————————————————————————————————————
方法封装
首先先在项目中的src下建立一个文件夹，并建立个js文件
然后在里面编写
//封装操作locastorage，本地缓存方法 ，模块化的文件
//node.js 基础（有机会再实际了解）
var storage = {
set(key,value){
//把对象全部转换成字符串
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
var list = JSON.parse(localStorage.getItem(key));
return list;
},
remove(key){
//删除缓存键值对
localStorage.removeItem(key);
}
}
//暴露出去供其他调用（固定格式）
export default storage;个人感觉这就相当于建立了一个类。。然后去app.vue导入他去调用，导入一下下
<script>
import storage from './model/storage.js';
//看看storage暴露出来，是不是对象
console.log(storage);
</script>然后就可以这么搞了，直接类名调用
<script>
import storage from './model/storage.js';
//看看storage暴露出来，是不是对象
console.log(storage);
export default {
name: 'app',
data () {
return {
textmodel:'',
list:[],
}
},methods:{
setList(e){
console.log(e.keyCode)
if(e.keyCode==13||e.keyCode==undefined){
if(this.textmodel!=''){
var textbean = new Object;
textbean.text = this.textmodel;
textbean.stuats = false;
this.list.push(textbean);
this.textmodel='';
//JSON.stringify(this.list)把对象转成字符串
storage.set('list',this.list);
}
}
},
deleteKey(key){
this.list.splice(key,1);
storage.set('list',this.list);
},
saveList(){
storage.set('list',this.list);
}
},mounted(){
//和data，methods同级
/*生命周期函数,页面刷新时执行*/
var list = storage.get('list');
//判断获取的值是否为空，不为空付给参数
if(list!=null){
this.list = list;
}
}
}
</script>