Vue.js-简单的增删查功能

Posted Smile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js-简单的增删查功能相关的知识,希望对你有一定的参考价值。

1.Vue.js是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2.下面一个简单的使用实现增删查功能


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="styles/demo.css" />
	</head>

	<body>
		<div id="app">

			<fieldset>
				<legend>
					Create New Person
				</legend>
				<div class="form-group">
					<label>Name:</label>
					<input type="text" v-model="newPerson.name"/>
				</div>
				<div class="form-group">
					<label>Age:</label>
					<input type="text" v-model="newPerson.age"/>
				</div>
				<div class="form-group">
					<label>Sex:</label>
					<select v-model="newPerson.sex">
					<option value="Male">Male</option>
					<option value="Female">Female</option>
				</select>
				</div>
				<div class="form-group">
					<label></label>
					<button @click="createPerson">Create</button>
				</div>
		</fieldset>
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>Age</th>
					<th>Sex</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(person, index) in people">
					<td>{{ person.name }}</td>
					<td>{{ person.age }}</td>
					<td>{{ person.sex }}</td>
					<td :class="\'text-center\'"><button @click="deletePerson(index)">Delete</button></td>
				</tr>
			</tbody>
		</table>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本,优化了尺寸和速度 -->
	<script>
		var vm = new Vue({
			el: \'#app\',
			data: {
				newPerson: {
					name: \'\',
					age: 0,
					sex: \'Male\'
				},
				people: [{
					name: \'Jack\',
					age: 30,
					sex: \'Male\'
				}, {
					name: \'Bill\',
					age: 26,
					sex: \'Male\'
				}, {
					name: \'Tracy\',
					age: 22,
					sex: \'Female\'
				}, {
					name: \'Chris\',
					age: 36,
					sex: \'Male\'
				}]
			},
			methods:{
				createPerson: function(){
					this.people.push(this.newPerson);
					// 添加完newPerson对象后,重置newPerson对象
					this.newPerson = {name: \'\', age: 0, sex: \'Male\'}
				},
				deletePerson: function(index){
					// 删一个数组元素
					this.people.splice(index,1);
				}
			}
		})
	</script>

</html>

实现的效果图如下:

以上是关于Vue.js-简单的增删查功能的主要内容,如果未能解决你的问题,请参考以下文章

vue.js实现简单增删效果

vue.js实现图书购物商城

vue.js实现图书购物商城

vue.js实现图书购物商城

vue.js实现图书购物商城

使用带有渲染功能的 Vue.js 3 片段