Vue学习(5)————————ToDoList条件渲染（v-if）（简单缓存）（方法封装）

个人理解简写 

<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