vue中简单小例子(Table动态增删)

table动态改变

要实现的目标1.按增加按钮能能往store.js.state.people增加一个对象
		   2.按减少按钮能能往store.js.state.people减少一个对象
		   3.每次增加或者减少都能实时的表现在表格上
初始状态:

增加一个对象以后:

减少一个对象以后:

程序目录

	介绍一下：
	app.vue 初始页面
	store.store.js里面是全局存放的数据
	DrawTable.js 用来生成表格

需要安装的包

npm install jquery
npm install vuex

app.vue

<template>
	<div class="body">
		<p>this is a table-test vue</p>
		<div style="display: flex;">
			<input type="text" value="id" id="idd">
			<input type="text" value="name" id="namee">
			<button @click="btnHandler">增加按我</button>
			<button @click="btnHandler02">减少按我</button>
		</div>
		<p></p>
		<table>
			<thead>
				<th>id</th>
				<th>name</th>
			</thead>
			<tbody class="data-show">
				<!-- 展示数据 -->
			</tbody>
		</table>
	</div>
</template>

<script>
	import $ from 'jquery'
	import {
		Show
	} from './components/DrawTable.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['people'])
		},
		mounted() {
			Show(this.people);
		},
		created() {
			// console.log(this.people);
		},
		methods: {
			...mapMutations(['addPeople','deletePeople']),
			btnHandler() {
				var obj = {
					"id": $('#idd').val(),
					"name": $('#namee').val()
				}
				this.addPeople(obj);
				// console.log($('#idd').val());
			},
			btnHandler02(){
				this.deletePeople();
			}
		},
		//watch监听people是否发生变化
		//要注意这里people没有this.people而下面需要Show(this.people)搞不懂有点
		watch:{
			'people':function(){
				// alert("变化了");
				$(".data-show").empty();//people如果变化了则清空之前.data-show里面的东西
				Show(this.people);
			}
		}
	}
</script>

<style>
	.body {
		width: 300px;
		height: 300px;
		background: #ffffff;
	}

	.body table {
		border: 1px solid black;
		width: 100%;
		/* 没有内边距 */
		border-collapse: collapse;
		text-align: center;
	}

	.body table th,
	.body table td {
		border: 1px solid black;
	}
</style>

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
	//存放数据
	state: {
		//先是手动存了两个数据
		//这里的people是被设置为数组形式
		people: [{
				"id": 0,
				"name":"A"
			},
			{
				"id": 1,
				"name":"B"
			}
		]
	},
	//存放对state修改的方法 
	mutations: {
		addPeople(state,obj){
			state.people.push(obj);//只有数组才有push方法
		},
		deletePeople(state){
			state.people.pop();
		}
	},
	actions: {
		//异步操作可以放在这里比如setTimeout
	},
	getters: {
		//对state数据进行加工return值但是不改变state的值
	}
})

DrawTable.js

import $ from 'jquery'

function Show(people){
	// console.log(people);
	// console.log(people.length);
	// console.log(people.id[1]);
	for(var j=0;j<people.length;j++){
		var $trTemp=$("<tr></tr>");
		$trTemp.append("<td>"+people[j].id+"</td>");
		$trTemp.append("<td>"+people[j].name+"</td>");
		$trTemp.appendTo(".data-show")
	}
}
//要注意方法需要导出
export{
	Show
}