2018-05-22 指令

v-if && v-show && v-else

    <div id="app">
        <div v-if="isLogin">你好：WarmT</div>
        <!-- <div v-show="isLogin">你好：WarmT</div> -->
        <div v-else="isLogin">请登录后在操作</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>

v-if和v-show的区别：

1. v-if 判断是否加载，如果时false就不请求了，可以减轻服务器压力，在需要时加载
2. v-show 调整css display属性，可以使客户端操作更加流畅。

v-for 和 v-for 排序

   <div id="app">
    <h2>数组排序</h2>
    <ul>
        <li v-for="item in sortItems">
            {{item}}
        </li>
    </ul>
    <h2>对象排序</h2>
    <ul>
        <li v-for="(student,index) in students">
            {{index + 1}}: {{student.name}}----{{student.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[22,14,23,54,36,28,7],
            students:[
                {name:'warmT',age:33},
                {name:'pangpang',age:22},
                {name:'king',age:14},
            ]
        },
        computed:{
            sortItems:function(){//对象排序
                  return this.items.sort(sortNumber);
            },
            sortstudents:function(){//数组排序
                return sortByKey(this.students,'age');
            }
        }
    })
    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>

v-text 和 v-html 排序

    <div id="app">
        <span v-text="msg"> </span>
        <span v-html="dodo"> </span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                msg:"vText的内容",
                dodo:"<h2> vHtml内容 </h2>"
            }
        })
    </script>

绑定事件 v-on可以用 @替换

    <div id="app">
        本场比赛得分：{{count}}<br>
        <button v-on:click="jiafen"> 加分 </button>
        <button @click="jianfen"> 减分 </button>
        <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                count:1,
                secondCount:2
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                },
                onEnter:function(){
                    this.count=this.count + parseInt(this.secondCount);
                }
            }
        })

    </script>

image.png