VUE中数据排序sort() / 数据反转 reverse() 的使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue中的变异方法：排序：sort()方法和反转：reverse() 方法</title><script type="text/javascript" ...

量子物理学

7979人浏览 · 2020-03-16 13:49:23

量子物理学 · 2020-03-16 13:49:23 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^