vue内部指令

vue内部指令

1. v-if （判断是否加载，减轻服务器压力，在需要时加载）指令与v-else同时出现
2. v-show（具有dispaly的属性，使用户操作更流畅）
3. v-for

<div id="app">
    <ul>
        //数组排序
        <li v-for="item in sortItems">
            {{item}}
        </li>
    </ul>
    <hr>
    <ul>
        //对象排序
        <li v-for="(student,index) in (sortStudents)">
            //{{xxx}}:加入序号
            {{index+1}}:{{student.name}}-{{student.age}}
        </li>
    </ul>
     

</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            items:[53,23,7,14,54,36,28],
            students:[
                {name:'xiaokeai',age:5},
                {name:'xiaoxiannv',age:4},
                {name:'xiaomeinv',age:3},
                {name:'xiaoxinxin',age:2},
            ]
        },
        computed:{
            //排序方法
            sortItems:function(){
                return  this.items.sort(sortNumber);
            },
            //对象数组排序方法
            sortStudents:function(){
                return sortByKey(this.students,'age')
            }
        }
    });
    //排序方法，js普遍存在的bug,需要单写一个引用
    function sortNumber(a,b){
        return a-b;
    }
    //数组对象方法排序:
    //传递两个值：第一个数组，第二个列
    function sortByKey(array,key){
        return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
    }
</script>

注：1. computed是放方法的，
2. sort()方法排序按字母排序，需要定义一个方法再传回sort才能正确排序