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">請(qǐng)登錄后在操作</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>

v-if和v-show的區(qū)別：

1. v-if 判斷是否加載，如果時(shí)false就不請(qǐng)求了，可以減輕服務(wù)器壓力，在需要時(shí)加載
2. v-show 調(diào)整css display屬性，可以使客戶端操作更加流暢。

v-for 和 v-for 排序

   <div id="app">
    <h2>數(shù)組排序</h2>
    <ul>
        <li v-for="item in sortItems">
            {{item}}
        </li>
    </ul>
    <h2>對(duì)象排序</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(){//對(duì)象排序
                  return this.items.sort(sortNumber);
            },
            sortstudents:function(){//數(shù)組排序
                return sortByKey(this.students,'age');
            }
        }
    })
    function sortNumber(a,b){//對(duì)象排序
            return a-b;
    }
    function sortByKey(array,key){//數(shù)組排序
        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的內(nèi)容",
                dodo:"<h2> vHtml內(nèi)容 </h2>"
            }
        })
    </script>

綁定事件 v-on可以用 @替換

    <div id="app">
        本場(chǎng)比賽得分：{{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