Vue的数组更新

最新推荐文章于 2024-03-25 18:18:43 发布

ly_yanbo

最新推荐文章于 2024-03-25 18:18:43 发布

阅读量5.4k

点赞数

本文链接：https://blog.csdn.net/ly_yanbo/article/details/88949971

版权

对数组进行操作，在开发中也是比较常用的。Vue 本身也提供了很多观察数组变异的方法，使用它们改变数组也会触发视图更新。之前查阅资料用 Vue 实现一个脱离后端简单实现增删改查的代码，就以此举例吧。

<body>
		<div id="app">
			<div id="body">
				<div id="title">
					<h3 id="titleFont">添加商品</h3>
				</div>
				<div id="text">
					<label>
                     商品码:
          <input type="text" class="text-control" v-model="id">
        </label>
					<label>
                     商品名:
          <input type="text" class="text-control" v-model="name">
        </label>
					<label>
                     价格:
          <input type="text" class="text-control" v-model="price">
        </label>
					<input type="button" value="添加" class="btn-style" @click="add()">
					<input type="button" value="确认" class="btn-style" @click="save(item)">
					<label style="margin-left: 35px;">
          	搜索名称关键字：
          <input type="text" class="text-control" v-model="keywords">
        </label>
				</div>
			</div>

			<table class="table-style">
				<thead>
					<tr>
						<th>商品码</th>
						<th>商品名</th>
						<th>价格</th>
						<th>入库时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in search(keywords)" :key="item.id">
						<td v-text="item.id"></td>
						<td v-text="item.name"></td>
						<td v-text="item.price"></td>
						<td v-text="item.intime"></td>
						<td>
							<a href="#" @click.prevent="Edit(item)">编辑</a>
							<a href="#" @click.prevent="del(item.id)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					price: '',
					keywords: '',
					list: [{
							id: 1,
							name: '香飘飘',
							price: '5元',
							intime: new Date()
						},
						{
							id: 2,
							name: '优乐美',
							price: '4元',
							intime: new Date()
						},
						{
							id: 3,
							name: '康师傅',
							price: '5元',
							intime: new Date()
						}
					]
				},
				methods: {
					add() {
						var good = {
							id: this.id,
							name: this.name,
							price: this.price,
							intime: new Date()
						}
						this.list.push(good)
						this.id = this.name = this.price = ''
					},
					del(id) {
						var index = this.list.findIndex(list => {
							if(list.id == id) {
								return true
							}
						})
						this.list.splice(index,1)	
					},
					search(keywords) {
						return this.list.filter(item => {
							if(item.name.includes(keywords)) {
								return item
							}
						})
					},
            	    Edit(item) {
            	    	this.id = item.id,
            	    	this.name = item.name,
            	    	this.price = item.price
            	    },
            	    save(){
            	    	var good = {
							id: this.id,
							name: this.name,
							price: this.price,
							intime: new Date()
						}
            	    	this.list.splice(this.id-1,1,good)
            	    	this.id = this.name = this.price = ''
            	    }
				}
			})
		</script>
	</body>

运行截图如下：
在这里插入图片描述

这里用到 push() 方法用来作为数据的增加，输入框的数据经过 v-model 双向绑定，当输入的数据发生改变时，data 中的数据也会发生改变，点击添加按钮调用 add() 函数。然后将 data 中的数据赋给 good ，此时对 good 进行操作。push() 和我们学数据结构用到的push 很相似，这里也可以简单的理解成进栈的操作。this.list.push(good) 将 good 的数据存入 list 中（ this 指的是 data ）。这样增加的功能就实现了。
删除的功能用到 splice() 方法，splice() 方法通过删除或替换现有元素来修改数组,并以数组形式返回被修改的内容。splice()的形势大概如下：
array.splice(start[, deleteCount[, item1[, item2[, …]]]])
start：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount： 可选。
整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
item1, item2, …： 可选
要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
查的方法使用的是 filter() 方法，includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。并且 filter() 方法不改变原数组。

ly_yanbo

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue的数组更新

对数组进行操作，在开发中也是比较常用的。Vue 本身也提供了很多观察数组变异的方法，使用它们改变数组也会触发视图更新。之前查阅资料用 Vue 实现一个脱离后端简单实现增删改查的代码，就以此举例吧。<body> <div id="app"> <div id="body"> <div id="title"> <h3 i...
复制链接

扫一扫