Vue：Vue基础知识之利用v-for语句+自定义排序函数实现data内数据按照age列自动排序

最新推荐文章于 2024-03-10 21:21:16 发布

听雪闻歌

最新推荐文章于 2024-03-10 21:21:16 发布

阅读量1w

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42229253/article/details/81268055

版权

VUE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、v-for循环实例：依次输出data数据的items的所有数值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>v-for实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    <div id="app" >
        <!-- 模板的输出方式，把message变量渲染到模板里 -->
        <ul>
            <!-- v-for写到要循环的那个标签上 -->
            <li v-for='item in items'>  
                {{item}}
            </li>
        </ul>
    </div>
    
    <script type='text/javascript'>
       //声明变量且实例化(生成器)
        var app =new Vue({
            el:'#app',
            data:{
                items:[6,56,64,2,7,43,5]
            }

        })
    
    </script>
</body>
</html>

2、Vue：利用v-for语句+自定义排序函数实现data内students数据表，按照age列自动排序

(1)、index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js实例</title>
</head>
<body>
    <h1>Vue2.0实例</h1>
    <hr>
    <ol>
        <li><a href='./example/helloword.html'>Hello World实例</a></li>
        <li><a href='./example/v-if.html'>v-if&v-else&v-show</a></li>
        <li><a href='./example/v-for.html'>v-for实例</a></li>
    </ol>
    
</body>
</html>

(2)、v-for.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>v-for实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    <div id="app" >
        <!-- 模板的输出方式，把message变量渲染到模板里 -->
        <ul>
            <!-- v-for写到要循环的那个标签上 -->
            <li v-for='item in sortitems'>  
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for='(student,index) in sortStudents'>
            {{index+1}}:{{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>
    
    <script type='text/javascript'>
       //声明变量且实例化(生成器)
        var app =new Vue({
            el:'#app',
            data:{
                items:[61,6,64,22,72,43,5],
                students:[
                    {name:'Andrew Ng',age:'42'},
                    {name:'Jason Niu',age:'25'},
                    {name:'Geoffrey Hinton',age:'76'}
                ]
            },
            computed:{
                sortitems:function(){
                    // return [1,2,3,4,5,6,7];
                    // return this.items.sort();       //首字符排序
                    //所有的Js默认都是首字符排序。加上自定义的可以改为数值整体排序。
                    return this.items.sort(sortNumber);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }

        });
        function sortNumber(a,b){
            return a-b;
        }
        //数组对象方法排序:
        function sortByKey(array,key){  //(数组、排序的列)
            return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
        }
    
    </script>
</body>
</html>

听雪闻歌

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue：Vue基础知识之利用v-for语句+自定义排序函数实现data内数据按照age列自动排序

1、v-for循环实例：依次输出data数据的items的所有数值&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;v-for实例&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta nam
复制链接

扫一扫