Vue.js高效前端开发(考试内容，增删查)

最新推荐文章于 2024-06-01 15:46:07 发布

W少年没有乌托邦

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量275

点赞数 11

分类专栏： Vue.js前端高效开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Mr_wangzu/article/details/139008326

版权

Vue.js前端高效开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

题目：

编辑效果图：编辑

代码：

题目：

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜品信息</title>
	</head>
	<body>
		<div id="app">
			<fieldset  >
				<legend>
					新菜品信息
				</legend>
				<div style="margin-left: 40%;">
					
				
				<span>名称：</span><input type="text" name="" id="" v-model="temp.name"><br>
				<span>价格：</span><input type="text" name="" id="" v-model="temp.price"  ><br>
				<select name="" id="" v-model="temp.type">
					<option value="鲁菜">鲁菜</option>
					<option value="川菜">川菜</option>
				</select>
				<br>
				<input type="button" value="添加" @click="add"><br>
</div>
			</fieldset>
			<div style="margin-left: 40%;">
				
			
			<span>查询关键字：</span><input type="text" name="" id="" v-model="keyword" placeholder="请输入查询关键字......."><br>
			</div>
			<table border="1" style="width: 100%;">
				<tr style="background-color: limegreen;">
					<th>名称</th>
					<th>价格</th>
					<th>类别</th>
					<th>删除	</th>
				</tr>
				<tr v-for="(item,index) in keyword.length>0? newlist:list" style="background-color: cornsilk;">
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>{{item.type}}</td>
				<td><input type="button" value="删除" @click="delect(index)"></td>
				</tr>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script>
			
			var vue=new Vue({
				el:"#app",
				data:{
					temp:{
						name:"",
						price:"0",
						type:"鲁菜"
					},
					keyword:"",
					list:[{
						name:"糖醋鲤鱼",
						price:"￥89.00元",
						type:"鲁菜"
					},
					{
						name:"鱼香肉丝",
						price:"￥49.00元",
						type:"川菜"
					},
					{
						name:"爆炒腰花",
						price:"￥58.00元",
						type:"鲁菜"
					}
					],
					newlist:[]
					
				},
				watch:{
					// 查询功能
					keyword:function(newVal,oldVal){
						this.newlist=this.list.filter(x=>x.name.toString().includes(newVal.toString()))
						
					}
				},
				methods:{
					// 添加功能
					add:function(){
						//非空验证
						if (this.temp.name.length==0||this.temp.price.length==0||this.temp.type.length==0) {
						alert("请输入完整！")
						}
						 else{
							 // 在添加时字符串拼接
							this.temp.price="￥"+this.temp.price+".00元",
							this.list.push(this.temp),
							this.temp={
								name:"",
								price:"0",
								type:"鲁菜"
						}		
						
						
					}},
					// 删除功能
					delect:function(index){
						if (confirm("删除当前菜品信息吗？")) {
							this.list.splice(index,1)
						} else{
							
						}
						
					}
					
				}
			})
		</script>
	</body>
</html>