过滤器-orderBy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <ul>
            <li v-for="val in arr | orderBy a">  <!--orderBy 1或者orderBy -1,也可以是orderBy ‘a‘按照a来排序-->
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
                a:‘‘ //a的值为1时正排序,为-1为到排序
            },
            methods:{

            }
        }).$mount(‘#box‘);

    </script>
</body>
</html>
时间: 2024-11-04 13:26:21

过滤器-orderBy的相关文章

AngularJs学习笔记(二)----------关于过滤器

<!DOCTYPE html5> <html> <head> <title>AngularJs的练习</title> <meta charset="UTF-8"/> </head> <body ng-app="myModule1"> <h1>AngularJs中过滤器的使用---在HTML模板中使用</h1> <h3>number过滤器

Vue自带的过滤器

一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i

【AngularJS学习笔记】01 指令、服务和过滤器

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码var app = angular.module('名字', []); ng-init 指令初始化应用程序数据. 这个在之前已经说过了,下面讲一下之前没讲到的. ng-repeat指令与ng-options指令 <!--一般ng-repeat通常用于ul与li这种列表和表格--> <div ng

轻松Angularjs实现表格按指定列排序

angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行. html: <input type="text" ng-model="search"/> <table border="1" cellpadding="0" cellspacing="1" width="400px"> <tr> <th ng-c

angular js的一些操作

angular使开发应用变得简单,降低构建复杂应用难度!但是它依赖注入!anjular不操作dom节点而是一个作用域 要操作作用域 就要先绑定,如何绑定一个作用域呢? 首先在页面引入 <script src="anjular.js">文件! <html ng-app></html>意思就是把整个html页面当做作用域! 绑定作用域是“ng-app” 绑定好作用域就可以对作用域内的绑定表达式进行数据绑定 <body> hello{{“wor

orderBy 过滤器

orderBy 过滤器根据表达式排列数组: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edeg" /> <meta nam

angular中的orderBy过滤器使用

一  orderBy过滤器 AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array: 第一种:function,如果是function,那么function函数会遍历待排序的数组,并将返回的结果作为angular库函数中comparator的参数,进行比较排序. 第二种:如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序.如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降

filter,orderBy等过滤器

filter用法比较灵活(也增加了较高的复杂度),单独列出. 基本的用法: <input type="text" class="search" ng-model="keyword" /> ng-repeat="item in items | filter:{name:keyword,done:false}" // 默认是and连接多个属性 ng-repeat="item in items | filter

vue13过滤器 debounce延迟、limitBy、filterBy、orderBy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社--http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma