<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <li v-for="(v,k) in comments">

        {{v.id}} - {{v.content}}

        <button v-on:click="remove(k)">删除</button>

    </li>

    <textarea v-model="current_content" cols="30" rows="10"></textarea><br>

    <button v-on:click="push('end')">发表到后面</button>

    <button v-on:click="push('pre')">发表到前面</button>

    <br>

    <button v-on:click="del('last')">删除最后一条评论</button>

    <button v-on:click="del('first')">删除第一条评论</button>

    <button v-on:click="del('all')">删除全部评论</button>

    <br>

    <button v-on:click="sort('asc')">按照编号顺序排序</button>

    <button v-on:click="sort('dsc')">按照编号倒序排序</button>

    <button v-on:click="reverse()">反转顺序</button>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            //当前用户输入内容

            current_content: '',

            comments: [

                {id: 2, content: 'HDPHP'},

                {id: 4, content: 'HDCMS'},

                {id: 1, content: '后盾人'},

                {id: 3, content: '向军老师'},

            ]

        },

        methods: {

            sort(type){

                switch (type) {

                    case 'asc':

                        this.comments.sort(function (a, b) {

                            return a.id > b.id;

                        });

                        break;

                    case 'dsc':

                        this.comments.sort(function (a, b) {

                            return a.id < b.id;

                        });

                        break;

                }

            },

            reverse(){

                this.comments.reverse();

            },

            remove(k){

                this.comments.splice(k, 1);

            },

            push(type){

                var id = this.comments.length+1;

                var content = {id:id,content: this.current_content}

                switch (type) {

                    case 'end':

                        this.comments.push(content);

                        break;

                    case 'pre':

                        this.comments.unshift(content);

                        break;

                }

                this.current_content = '';

            },

            del(type){

                switch (type) {

                    case 'last':

                        this.comments.pop();

                        break;

                    case 'first':

                        this.comments.shift();

                        break;

                    case 'all':

                        this.comments=[];

                        break;

                }

            }

        }

    });

</script>

</body>

</html>

效果:

23.VUE学习之-列表的排序sort的更多相关文章

  1. Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）

    文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...

  2. Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）

    文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...

  3. python内置数据类型-字典和列表的排序 python BIT sort——dict and list

    python中字典按键或键值排序(我转!)   一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...

  4. Python 排序---sort与sorted学习

    当我们从数据库中获取一写数据后,一般对于列表的排序是经常会遇到的问题,今天总结一下python对于列表list排序的常用方法: 第一种:内建方法sort() 可以直接对列表进行排序 用法: list. ...

  5. 2019年6月12日——开始记录并分享学习心得——Python3.7中对列表进行排序

    Python中对列表的排序按照是排序是否可以恢复分为:永久性排序和临时排序. Python中对列表的排序可以按照使用函数的不同可以分为:sort( ), sorted( ), reverse( ). ...

  6. Python 排序---sort与sorted学习（这是摘录别人的资源总结，自己可临摹学习）

    第一种:内建方法sort() 可以直接对列表进行排序 用法: list.sort(func=None, key=None, reverse=False(or True)) 对于reverse这个boo ...

  7. 《python基础教程（第二版）》学习笔记 列表/元组（第2章）

    <python基础教程(第二版)>学习笔记 列表/元组(第2章)序列中的下标从0开始x='ABC' ==> x[0]='A', x[1]='B', x[2]='C'负数索引从右边开始 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. python学习之列表语法

    1.列表 1 list.append(obj)在列表末尾添加新的对象2 list.count(obj)统计某个元素在列表中出现的次数3 list.extend(seq)在列表末尾一次性追加另一个序列中 ...

随机推荐

  1. Asp.NetCore 2.2 WebApi 发布到IIS步骤及错误处理

    一.创建一个Asp.NetCore WebApi 程序(话不多说) 二.发布 三.配置IIS 程序池中选中网站的程序池 ——基本设置 浏览网站——浏览器 域名后面输入api/values 四.错误处理 ...

  2. 【Linux】Xshell-Linux常用命令

    (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...

  3. <checking for mysql_config not found>

    php 5.3.29编译安装排错: ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc --w ...

  4. UEditor百度编辑器

    第一步:首先下载ueditor编译器,地址:http://ueditor.baidu.com/website/ 下载完解压之后就这个: 第二步:我会把文件名utf-8-jsp这个文件名改为uedito ...

  5. iOS JS 交互之利用系统JSContext实现 JS调用OC方法以及Objective-C调用JavaScript方法

    ios js 交互分为两块: 1.oc调用js 这一块实现起来比较简单, 我的项目中加载的是本地的html,js,css,需要注意的是当你向工程中拖入这些文件时,选择拷贝到工程中,(拖入的文件夹是蓝色 ...

  6. shell中的判断语句

    1.字符串判断 str1 = str2 当两个串有相同内容.长度时为真 str1 != str2 当串str1和str2不等时为真 -n str1 当串的长度大于0时为真(串非空,变量) -z str ...

  7. 【转发活动】Hey, 是你吗? | 寻"粉"启示

    你知道吗 从 A computer on every desk and in every home 让每张办公桌上和每个家庭都有一台计算机 ▼ 到 Where do you want to go to ...

  8. spring 中使用quartz实现定时任务

    一般开发系统,使用定时任务非常常见.当然也可以用Java实现.比如定时器.大致如下: 1: public static void main(String[] args) { 2: Timer time ...

  9. docker使用centos7系统构建tomcat镜像

    FROM shansongxian/centos-oraclejdk8:latest #此镜像使用centos7系统,精简jdk,只运行java程序,无法编译/构建 MAINTAINER huqian ...

  10. COGS 750. 栅格网络流

    ★★☆   输入文件:flowa.in   输出文件:flowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] Bob 觉得一般图的最大流问题太难了,他不知道如何解决 ...