个人理解简写
<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