对数组进行操作,在开发中也是比较常用的。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() 方法不改变原数组。
Logo

前往低代码交流专区

更多推荐