a = ['苹果',‘西瓜’,'[桃子]'] b= [{name:'西瓜',value:0.1},{name:'桃子',value:0.5},{name:'苹果',value:0.8}],将b数组按照a数组的顺序排列vue方法
时间: 2023-12-31 15:03:54 浏览: 37
可以使用Vue.js中的computed属性来实现按照a数组的顺序排列b数组。具体代码如下:
``` vue
<template>
<div>
<ul>
<!-- 循环渲染排序后的数组 -->
<li v-for="item in sorted_b" :key="item.name">
{{ item.name }}: {{ item.value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
a: ["苹果", "西瓜", "[桃子]"],
b: [
{ name: "西瓜", value: 0.1 },
{ name: "桃子", value: 0.5 },
{ name: "苹果", value: 0.8 },
],
};
},
computed: {
sorted_b() {
// 使用Array的sort()方法结合indexOf()实现按照a数组的顺序排序b数组
return this.b.sort((x, y) => {
return this.a.indexOf(x.name) - this.a.indexOf(y.name);
});
},
},
};
</script>
```
以上是一个简单的Vue.js组件,其中computed属性sorted_b使用了Array的sort()方法结合indexOf()实现按照a数组的顺序排序b数组。在模板中使用v-for循环渲染排序后的数组即可。
阅读全文