Vue小小点

本文介绍了Vue.js中数组过滤的方法,避免使用for循环;解决数组对象赋值时数据同步变化的问题;并展示了如何通过location.search获取URL参数。这些技巧对于提升开发效率和代码质量非常有帮助。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 数组过滤问题


       <script> 
        //现有一个数组想过滤掉不需要的数据,又不想写for循环的简便方法
		new Vue({
			el:"#app",
			data:{
				carts:[
				{
				 checked:true//是否勾选(true:勾选,false:未勾选)	
				}
			
				] //购物车
			},
			methods:{
				getCarts(){
				//过滤   后  重新赋值
			       this.carts=this.carts.filter(c=>c.checked)	 
				   }
				   
               }
		})
		</script>

	 

2.把一个数组中的一个对象(a) 赋值给一个对象(b),当改变 b时a也随着改变,解决此问题:

 

  <script> 
       
		new Vue({
			el:"#app",
			data:{
				cart:{},  
				carts:[] //购物车
			},
			methods:{
				getCart(index){
				  //用JSON转换   这样一倒腾就不会出想 数据串乱的问题了
			       let str =JSON.stringify( this.carts[index])
					this.cart=JSON.parse(str)
				   }
				   
               }
		})
		</script>
      

3. 获取路径参数

http://www.ypg.com/list.html?cat_id=231
location.search.match(/cat_id=(\d+)/)[1]
 

  <script> 
       
		new Vue({
			el:"#app",
			data:{
				catid:location.search.match(/cat_id=(\d+)/)[1]  //  得到的是231
			} 
		})
		</script>
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值