Vue v-for、computed给数组对象按照某一属性值排序

最新推荐文章于 2022-06-30 18:50:57 发布
最新推荐文章于 2022-06-30 18:50:57 发布
阅读量530 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/120331110
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="student in sortStudent">
        {{ student }}
      </li>
    </ul>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          students:[
            {name:'Lily',age:31},
            {name:'David',age:30},
            {name:'John',age:47},
            {name:'Mei',age:42}
          ]
        }
      },
      computed: {
        sortStudent: function () {
          return sortByKey(this.students, 'age');
        }
      }
    });
    function sortByKey(arr, key) {
      return arr.sort((a, b) => {
        // console.log(a);
        // console.log(b);
        var x = a[key];
        var y = b[key];
        // return x - y;
        // 若 x 小于 y，在排序后的数组中 x 应该出现在 y 之前，则返回一个小于 0 的值。
        // 若 x 等于 y，则返回 0。
        // 若 x 大于 y，则返回一个大于 0 的值。
        return ((x<y)?-1:((x>y)?1:0));
      });
    }
  </script>
</body>
</html>

 

 

每一天，每一步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-for根据某字段排序
08-10
v-for根据某字段进行排序显示，方法比较灵活，可嵌入任何系统，不用依赖包，懂点vue基础的人都会用
vue computed使用_Vue之路 | 04计算属性computed
weixin_39632728的博客
11-28 387
点击左上方“熊吱”关注我们吧！在vue实例中，除了el、data、methods外，还存在一个叫做computed的计算属性，在计算属性中也是添加方法，但是调用的时候不用添加括号。1字符串操作计算属性可以将两个字符串做拼接操作，简单的代码示例如下：<divid="app">{{fullname}}div> <script> ...
Vue中使用computed实现数组中每个对象里面的内容保留小数且为null的让内容为无
KeepSober_D的博客
08-04 1438
首先说一下问题，开发中遇到一个需求是这样的，需要将接口中返回的数据做一个处理，这个数据格式是一个大的数组中包很多对象，每个对象中是一个个字段，那些字段有的是小数，有的是整数，整数的话不用处理，小数就得保留4位；本来是打算一个一个处理的，但是因为数据量太大，就想了想借助computed写了一个方法； HTML 这是其中一个数组 <tr v-for="(item, index) in companyList" :key="index"> <td colspan="2"&gt
vue中数组中属性排序
哦哦一人
10-15 2396
如数组： a:[ {age:1, b:'123'}, {age:2, b:'123'}, {age:3, b:'123'}, {age:4, b:'123'}, ] 这样的数组根据age来进行排序 //排序 从大到小 ary==数组 key==比较的属性名string类型 paixu(ary, key) { return ary.sort(function (a, b) { let x = a[key] let y = b[key]
vue : watch、computed、以及对象数组
weixin_30376509的博客
01-08 1688
watch和computed是vue框架中很重要的特性。 那么，他们是怎么作用于对象数组的？ 今天我们就来探究一下。 上代码。 <template> <div class="hello"> {{ msg }} <div> <button @click="submit">plus&...
vue数组对象排序的实现代码
08-27
Vue 数组对象排序的实现代码主要介绍了在 Vue 框架中对数组对象的排序方法，包括普通数组的排序和数组对象的排序。下面是对应的知识点： 普通数组的排序 在 Vue 中，对普通数组的排序可以使用 `sort()` 方法，但是...
v-for过滤和排序，购物车页面效果，笔记本
03-15
在Vue.js框架中，`v-for`指令是用于遍历数据并将其渲染到视图中的核心功能之一。这个指令允许我们动态地生成元素列表，基于我们的数据数组。在这个主题中，我们将深入探讨如何使用`v-for`进行数据过滤和排序，以及...
一个通用实用好用的vue20的表格组件
08-10
在Vue组件中，我们可以使用`v-for`指令来遍历数据并生成表格行。同时，我们还需要考虑数据的处理，例如：根据用户的选择对数据进行排序或过滤。这可以通过在组件内定义计算属性（computed properties）实现，利用Vue...
vue实现表格过滤功能
10-16
`v-for`指令遍历`filterBooks`计算属性中的每一项，并将其显示出来。 - 排序按钮：通过`@click`事件监听器调用`setOrderType`方法，改变`orderType`的值以切换排序方式。 2. **数据（Data）**： - `searchText`：...
推荐列表双向绑定，比较接近VUE的方式
最新发布
09-12
在处理列表数据时，Vue.js提供了`v-for`指令，用于遍历数组或对象并生成相应的DOM元素。同时，如果列表中的每个元素都需要双向绑定，我们可以结合`v-model`来实现。例如，一个列表中包含多个输入框，每个输入框对应...
对vue的computed（计算属性）的理解
小太阳的博客
07-02 569
vue的计算属性： 1.在computed属性对象中定义计算属性的方法，在页面使用{{方法名}}来显示计算结果。 2.通过getter/setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算（计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算）。 <template> <div class="sea"> <div class="frost-content"> 姓名：<input
Vue之computed(计算属性)详解get()、set()
xiaokanfuchen86的博客
02-28 1689
Vue的计算属性： 1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。 2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。 <div id="demo"> 姓：<input type="text" placeholder="firstName" v...
Vue computed结合watch监听对象其一属性值的变化
热门推荐
weixin_42606458的博客
08-08 1万+
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, ol...
vue项目computed计算属性无法监听到数组对象内部变化解决方案
Taurus_666
06-30 8089
vue computed计算属性无法监听数组内部对象变化问题解决方案
04-Vue的计算属性computed
PP_zi的博客
07-21 576
在vue实例中，除了el、data、methods外，还存在一个叫做computed的计算属性，在计算属性中也是添加方法，但是调用的时候不用添加括号。 1、字符串操作 计算属性可以将两个字符串做拼接操作，简单的代码示例如下： <div id="app">{{fullname}}</div> <script> const app = new Vue({ el:'#app', data:{ firstnam
Vue的computed计算属性监听不到数组或者对象属性的变化
weixin_54257364的博客
04-23 1万+
data里面是这样定义 arr:[], obj:{} 在methods中的某个事件会改变数组/对象中的元素 clickBtn () { 　　this.arr[0] = false 或this.arr = [false] } //或者 clickBtn () { 　　this.obj = { 　　 test:12312 　　} 　　或 　　this.obj.test =12312 } 但在computed中监听不到这个数组中元素的变化 isAble() { //数组 　　if (
Vue的计算属性（computed）使用方法
青颜的天空的博客
07-28 3026
在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。 通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。 <div id="demo"> 姓：<input type="text" placeholder="firstName" v-model="firstName"><br> 名：<input type="text" placeholder="lastN.
vue.js中的v-for输出数组理解
weixin_34327761的博客
08-21 181
<div id="vue"> 　　<ul v-for='js in jss'> 　　<li>{{js.text}}</li> 　　</ul> </div> v-for='js in jss'这一行命令其实就是for in 循环遍历每个数组对象，然后通过{{js.text}}将每个对象的text属性输出 <s...
使用computed计算属性实现列表排序搜索功能V1.1
weixin_47606392的博客
06-23 248
使用computed计算属性实现列表排序搜索功能V1.1 Vue
vue中v-for="(item, index) in list读取list数据时，怎么读入list中item.value数据进行从大到小的排序
06-09
在 Vue 中，可以在模板中使用 JavaScript 表达式来读取数据，并通过 `v-for` 指令循环渲染数据列表。要对列表数据进行排序，可以使用 JavaScript 数组的 `sort` 方法。具体来说，可以在 Vue 实例的 `computed` 属性中定义一个计算属性，用于对列表数据进行排序后返回一个新的数组。然后在模板中使用 `v-for` 指令循环渲染排序后的数组。 下面是一个示例代码： ```html <template> <div> <div v-for="(item, index) in sortedList" :key="index"> {{ item.value }} </div> </div> </template> <script> export default { data() { return { list: [ { value: 3 }, { value: 1 }, { value: 5 }, { value: 2 }, { value: 4 } ] }; }, computed: { sortedList() { return this.list.sort((a, b) => b.value - a.value); } } }; </script> ``` 在上面的代码中，我们定义了一个名为 `sortedList` 的计算属性，用于对 `list` 数组进行排序后返回一个新的数组。在 `sort` 方法中，我们使用箭头函数对数组元素按照它们的 `value` 属性进行降序排列，即从大到小排列。然后在模板中使用 `v-for` 指令循环渲染 `sortedList` 数组中的元素，并使用 `{{ item.value }}` 语法读取每个元素的 `value` 属性值。这样，就可以实现对列表数据按照 `value` 属性进行从大到小的排序，并在模板中渲染排序后的数据列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值