Vue mutating sort & reverse Sort reviews

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title id="title">{{title}}</title>
</head>
<body>
<Div id = "ask"> <-! Vue can not control the body and html tag ->
    <ul>
        <li v-for="(v,k) in list">
           {{v.id}} ===== {{v.content}}<button v-on:click="remove(k)">删除</button>
        </li>
    </ul>
    <textarea v-model="content" cols="30" rows="10"></textarea><br>
    <Button v-on: click = "push ( 'pre')"> Post to the front </ button>
    <Button v-on: click = "push ( 'end')"> leave behind </ button>
    <br>
    <Button v-on: click = "del ( 'first')"> delete the first </ button>
    <Button v-on: click = "del ( 'last')"> delete the last one </ button>
    <br>
    <button v-on:click="sort">排序</button>
    <button v-on:click="reverse">反转</button>
</div>
<script>
    var view = function (options) { new view (options)};
    view({
        on: '#title' ,
        data:{
            title: 'Vue mutating sort & reverse sort of comment'
        }
    });
    was app = vue ({
        by el: '#ask' ,
        data:{
            content:'',
            list:[
                {'id':3,'content':'ask.mykeji.net'},
                { 'ID':. 5, 'Content': 'Simple record' },
                { 'ID': 2, 'Content': 'personal blog' },
                { 'ID':. 1, 'Content': 'study notes' },
                { 'ID':. 4, 'Content': 'want to learn what to learn what' }
            ]
        },
        methods:{
            reverse(){
                return this.list.reverse();
            },
            sort(){
                this.list.sort(function (a,b) {
                    return a.id>b.id;
                })
            },
            remove(k){
                this.list.splice(k,1)
            },
            push(type){
                var id = this.list.length+1;
                var content_push = {id:id,'content':this.content};
                switch (type) {
                    case 'pre':
                        this.list.unshift(content_push);
                        break;
                    case "end":
                        this.list.push(content_push);
                        break;
                }
                this.content='';
            },
            del(type){
                switch (type) {
                    case 'first':
                        this.list.shift();
                        break;
                    case "last":
                        this.list.pop();
                        break;
                }
            }
        }
    });

</script>
</body>
</html>
Vue mutating sort & reverse Sort reviews

Guess you like
