zoukankan      html  css  js  c++  java
  • 023——VUE中数据排序sort() / 数据反转 reverse() 的使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue中的变异方法:排序:sort()方法 和反转:reverse() 方法</title>
        <script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    <div id="demo">
        <li v-for="(v,k) in comments">
            {{v.id}}——{{v.content}}
            <button v-on:click="remove(k)">删除</button>
        </li>
        <textarea rows="10" cols="20" v-model="current"></textarea><br/>
        <button v-on:click="push('first')">在数据前面增加</button>
        <button v-on:click="push('last')">在数据后面增加</button>
        <br>
        <button v-on:click="del('first')">删除第一个数据</button>
        <button v-on:click="del('last')">删除最后一个数据</button>
        <br>
        <button v-on:click="sort">降序排序</button>
        <br>
        <button v-on:click="reverse">数据反转</button>
        <br>
        <button v-on:click="alldel">删除所有数据</button>
    </div>
    <script type="text/javascript">
    new Vue({
        el:"#demo",
        data:{
            current:"",
            comments:[
                {id:1,content:'JAVA'},
                {id:0,content:'PHP'},
                {id:3,content:'HTML'},
                {id:2,content:'CSS'}
            ]
        },
        methods:{
            //删除所有数据的方法:
            alldel(){
                this.comments=[];
            },
            //倒序排序的方法:
            sort(){
                this.comments.sort((a,b)=>{
                    return a.id<b.id;
                });
            },
            //反转数据:
            reverse(){
                this.comments.reverse();
            },
            //增加数据的方法:
            push(type){
                var id=this.comments.length;
                var content={id:id,content:this.current};
                switch (type){
                    case 'first':
                        this.comments.unshift(content);
                        break;
                    case 'last':
                        this.comments.push(content);
                        break;
                }
                this.current="";
            },
            //删除数据的方法:
            del(type){
                switch (type){
                    case 'first':
                        this.comments.shift();
                        break;
                    case 'last':
                        this.comments.pop();
                        break;
                }
            },
            //点击删除,删除对应的数据信息:
            remove(k){
                this.comments.splice(k,1);
            }
        }
    });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    css 弹出框
    net stop 出现1060错误
    a href=#与 a href=javascript:void(0) 的区别
    ubuntu如何安装Mac主题
    js arguments.callee & caller的用法及区别
    js函数——setinterval和setTimeout
    highcharts简介
    highcharts柱状图和饼图的数据填充
    jqgrid的外观重绘
    laravel定时任务
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8108663.html
Copyright © 2011-2022 走看看