Vue学习笔记（二）-内部指令

一、v-if/v-else/v-show指令

body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <!-- <div v-if="isLogin">你好</div>
        <div v-else>请登录</div> -->
        <div v-show="isLogin">你好</div>

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:true,
                
            }
        })
    </script>
</body>

v-if 和v-show的区别：

• v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
• v-show：调整css dispaly属性，可以使客户端操作更加流畅。

二、v-for指令

v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

1.排序

<div id="app">
        <ul>
            <li v-for="item in newItems">
                {{item}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[53,23,7,14,54,36,22]
            },
            computed:{//Vue不允许污染源数据，新定义newItems
                newItems:function(){
                    return this.items.sort(sortNum);
                }
            }
        });
　　　　　//this.items.sort（）存在bug，需新定义函数
        function sortNum(a,b){
            return a-b;
        }
    </script>

2.对象循环输出，并排序

<div id="app">
        <ul>
            <li v-for="item in newItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student,index) in newStudents">
                {{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,22],
                students:[
                    {name:'zs',age:33},
                    {nema:'ls',age:31},
                    {name:'zl',age:37}
                ]
            },
            computed:{
                newItems:function(){
                    return this.items.sort(sortNum);
                },
                newStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        function sortNum(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>