用Vue做一个简单的增删查

最新推荐文章于 2024-06-18 22:56:01 发布

nine percent 陈立农

最新推荐文章于 2024-06-18 22:56:01 发布

阅读量741

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_52031155/article/details/110000487

版权

本文通过实例演示如何使用Vue.js实现一个简单的增删查功能。首先介绍点击事件的4种语法，接着展示了如何创建基本页面并引入Vue.js及bootstrap。接着详细讲解了如何编写显示方法、v-for循环、添加数据的点击事件、name输入框的按下事件、搜索框的光标落下事件，以及添加、删除方法的实现。此外，还讨论了时间格式化的全局和局部过滤器的使用，使日期显示更美观。

摘要由CSDN通过智能技术生成

因为我们要写一个增删查的一个功能，那么我们一定会用到点击事件。首先我们来了解一下点击事件：
点击事件的语法有4种方法：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="show()">点击</button>
			<button v-on:click="show2()">点击2</button>
			<button @click="show3()">点击3简写</button>
			<button v-on:click="show4('msg')">点击2</button>
		</div>
		
		
		<script type="text/javascript">
			var app =new Vue({
				el:'#app',
				data:{
					msg:'陈立农'
				},
				methods:{
					show: function(){
						console.log("点击了我")
					},
					show2(){
						console.log("点击2")
					},
					show3(){
						console.log("点击3")
					},
					show4(n){
						console.log("点击4"+n)
					}
				}
			})
			
		</script>
	</body>
</html>

我们给标签一个绑定事件的方法添加一个指令：v-on
我们先把基础页面编写出来，借用bootstrap框架，使其更加好看
在这里插入图片描述

然后开始我们的vue编写，第一步引入我们的vue.js
在这里插入图片描述
这里link里面引入的是bootstrap框架路径，script里引入的是vue.js，这是网络地址，如有需要可以在官网下载vue.js然后放在项目里，直接引用。
首先我们来写页面的显示方法
第一；我们要给我们的app渲染，编写死数据，这个数据是一个数组。
在这里插入图片描述
又因为我们编写页面的时候是用了v-for指令让它的内容得以循环出来，所以我们还需要写一个显示的方法：

	stuListAll(){
						return this.stus.filter(function(item) {

最低0.47元/天解锁文章

nine percent 陈立农

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
用Vue做一个简单的增删查

因为我们要写一个增删查的一个功能，那么我们一定会用到点击事件。首先我们来了解一下点击事件：点击事件的语法有4种方法： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &
复制链接

扫一扫