vue 判断一个数是否在数组中_vuex中filter的使用 && 快速判断一个数是否在一个数组中...

vue中filter的使用

computed: mapState({

items: state=>state.items.filter(function (value, index, arr) {return index < 5})

}),

如上所示,对于vuex,我们在使用mapState获取state时, 可以使用filter来过滤其中的元素,在filter的回调函数中接受三个参数,第一个是value,即每一个元素的值; 第二个是index, 即每一个元素所在的index, 第三个参数是arr,即这个数组本身。 在上面的例子中,我们最终获取到了 index < 5 的01234四个元素组成的数组,显然, filter得到的还是数组。

又比如: 我们可以这么使用filter,在computed中:

cartItems: function (state) {var that = this;returnstate.contentItems.filter(function (value, index) {return that.filterIndex(state.numbers).indexOf(index) !== (-1);

});

},

其中: 我们先用了filter,然后用自定义了一个函数,再判断一个元素是否在一个数组之中。

快速判断一个数是否在一个数组中

有下面几种方法可以实现:

[54, 45, 85, 6].indexOf(6) !== -1

上述表达式如果返回的不是-1, 就说明满足,比如上面的例子返回的时3所以属于。

这是判断一个数是否在一个数组中最快的方法。

二、

使用[5, 2, 63, 8].includes(5), 如果返回true,则表明包含,但是includes在一些浏览器中并不支持,所以不能使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的Vuex购物车案例: 1. 在Vue.js应用程序安装Vuex库。 ``` npm install vuex --save ``` 2. 在Vuex定义状态(state),包括购物车的商品数组、总金额和总量。 ``` const store = new Vuex.Store({ state: { cartItems: [], cartTotal: 0, cartQuantity: 0 }, mutations: { addToCart(state, item) { // 检查商品是否已存在于购物车 const cartItem = state.cartItems.find(i => i.id === item.id) if (cartItem) { cartItem.quantity++ } else { state.cartItems.push({ id: item.id, name: item.name, price: item.price, quantity: 1 }) } // 更新购物车总金额和总量 state.cartTotal += item.price state.cartQuantity++ }, removeFromCart(state, item) { // 从购物车删除商品 const cartItem = state.cartItems.find(i => i.id === item.id) if (cartItem) { if (cartItem.quantity > 1) { cartItem.quantity-- } else { state.cartItems = state.cartItems.filter(i => i.id !== item.id) } // 更新购物车总金额和总量 state.cartTotal -= item.price state.cartQuantity-- } } } }) ``` 3. 在Vue.js组件使用Vuex状态。 ``` <template> <div> <ul> <li v-for="item in cartItems" :key="item.id"> {{ item.name }} - {{ item.price }} x {{ item.quantity }} <button @click="removeFromCart(item)">Remove</button> </li> </ul> <p>Total: {{ cartTotal }}</p> <p>Quantity: {{ cartQuantity }}</p> <button @click="addToCart({ id: 1, name: 'Product A', price: 10 })">Add to Cart</button> </div> </template> <script> import { mapState, mapMutations } from 'vuex' export default { computed: mapState([ 'cartItems', 'cartTotal', 'cartQuantity' ]), methods: mapMutations([ 'addToCart', 'removeFromCart' ]) } </script> ``` 在这个组件,我们使用mapState辅助函Vuex获取购物车的商品、总金额和总量,并使用mapMutations辅助函调用addToCart和removeFromCart mutations来更改购物车的商品。我们还添加了一个按钮来模拟将商品添加到购物车
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值