Vue使用基础案例（动态添加删除数据）

效果图如下：

功能说明：
输入必填项姓名，课程，成绩，点击添加按钮，通过事件绑定，把数据传输到add()方法，将newmessage数组中的值追加到message中，在页面v-for通过index循环出来列表，通过对成绩的值判断，自动进行评价，分为优秀，良好，一般，及格，不及格，不及格的会以加粗红色显示，点击删除按钮，弹出确认对话框，进行删除。

HTML结构：

1. v-cloak：使用 v-cloak 指令来解决屏幕闪动的问题；
2. v-model：双向数据绑定指令；
3. v-on:click 简写 @click 绑定点击事件；
4. v-for：基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名；
5. v-if ：指令用于条件性地渲染一块内容，配合 v-else-if 使用；

	<div id="app" v-cloak>
		<h3>Vue动态添加删除数据</h3>
		姓名：<input type="text" placeholder="请输入姓名" v-model='newmessage.name'><span>*</span><br><br>
		课程：<input type="text" placeholder="请输入课程" v-model='newmessage.object'><span>*</span><br><br>
		成绩：<input type="text" placeholder="请输入成绩" v-model='newmessage.chengj'><span>*</span><br><br>
		<!-- 评价：<input type="text" placeholder="请输入评价">*<br><br> -->
		<button class="btn" @click='add()'>添加</button><br><br>
		<table width="1000" border='1' cellpadding="0" cellspacing="0">
			<tr class="title">
				<td>姓名</td>
				<td>课程</td>
				<td>成绩</td>
				<td>评价</td>
				<td>操作</td>
			</tr>
			<tr v-for='(item,index) in message'>
				<td>{{item.name}}</td>
				<td>{{item.object}}</td>
				<td>{{item.chengj}}</td>
				<!-- 通过成绩判断，分成评价等级 -->
				<td v-if='item.chengj>=90&&item.chengj<=100'>优秀</td>
				<td v-else-if='item.chengj>=80&&item.chengj<90'>良好</td>
				<td v-else-if='item.chengj>=70&&item.chengj<80'>一般</td>
				<td v-else-if='item.chengj>=60&&item.chengj<=70'>及格</td>
				<td v-else><b>不及格</b></td>
				<td><button @click='del(index)'>删除</button></td>
			</tr>
		</table>
	</div>

JS代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:'#app',
	data:{
		message:[
			
		],
		newmessage:{name:'',object:'',chengj:''},
	},
	methods:{
		add(){
			if(!this.newmessage.name==''&&!this.newmessage.object==''&&!this.newmessage.chengj==''){
				this.message.push(this.newmessage);
				this.newmessage={
					name:'',
					object:'',
					chengj:''
				};
			}else{
				alert('请输入必填项！！');
			}
		},
		del(index){
			alert("确定要删除吗？");
			this.message.splice(index,1);
		},
	}
});
</script>

CSS代码：

	<style>
		.btn{
			width: 100px;
			height: 50px;
			background-color: #1894cd;
			font-size: 22px;
			color: #fff;
			border: none;
			cursor: pointer;
		}
		table {
			text-align: center;
		}
		table td {
			height: 25px;
		}
		.title td {
			background-color: #1894cd;
			color: #fff;
		}
		tr td button{
			background-color: #1894cd;
			color: #fff;
			border: none;
			border-radius: 30%;
			cursor: pointer;
		}
		span {
			color: red;
		}
		td b {
			color: red;
		}
	</style>

案例展示