Vue——数组操作

最新推荐文章于 2024-04-04 20:55:21 发布

原创最新推荐文章于 2024-04-04 20:55:21 发布 · 463 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue数组操作

小案例专栏收录该内容

1 篇文章

订阅专栏

博客围绕Vue数组操作展开，介绍了通过点击按钮可实现数组的排序、筛选和移除功能，聚焦于Vue在数组操作方面的应用，属于信息技术中前端开发领域。

数组操作

点击按钮实现排序功能

<div id="app">
			<button @click="sortGoods">排序</button>
			<ul>
				<li v-for="good of goods">
					{{good.name}}---{{good.price}}---{{good.count}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					goods:[
						{
							name:'ipone',
							price:5000,
							count:5
						},
						{
							name:'华为',
							price:3000,
							count:8
						},
						{
							name:'小米',
							price:2000,
							count:15
						}
					]
				},
				methods:{
					sortGoods:function(){
						this.goods = this.goods.sort(function(x,y){
							return x.price-y.price
						});
					}
				}
			})
		</script>

点击按钮实现筛选功能

<div id="app">
			<button @click="filterGoods">筛选</button>
			<ul>
				<li v-for="(good,index) in goods">
					名称：{{good.name}}---价格: {{good.price}}---数量： {{good.count}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					goods:[
						{
							name:'ipnone',
							price:8000,
							count:12
						},
						{
							name:'华为',
							price:5000,
							count:5
						},
						{
							name:'vivo',
							price:3000,
							count:20
						},
						{
							name:'小米',
							price:3000,
							count:50
						},
						{
							name:8848,
							price:10000,
							count:2
						}
						
					]
				},
				methods:{
					filterGoods:function(){
						this.goods = this.goods.filter(function(element){
							if(element.price>5000){
								return element;
							}
						})
					}
				}
				
			})
		</script>

点击按钮实现移除功能

<div id="app">
			<ul>
				<li v-for="(good,index) in goods" :key="good.name">
					名称：{{good.name}}---价格: {{good.price}}---数量： {{good.count}}
						<button @click="deleteGood(index)">移除</button>
				</li>
			</ul>
		
		
		</div>
		<script type="text/javascript">
				var app = new Vue({
				el:"#app",
				data:{
					goods:[
						{
							name:'ipnone',
							price:8000,
							count:12
						},
						{
							name:'华为',
							price:5000,
							count:5
						},
						{
							name:'vivo',
							price:3000,
							count:20
						},
						{
							name:'小米',
							price:3000,
							count:50
						},
						{
							name:8848,
							price:10000,
							count:2
						}
						
					]
				},
				methods:{
					deleteGood:function(index){
						this.goods.splice(index,1);
					}
					
				}
				})
		</script>