v-if,v-show,v-for · web前端

[TOC] # 實時預覽 ~~~ cnpm install live-server -g ~~~ 然后live-server就可以了 # v-if 判斷是否加載,如果是false就不加載,f12不能看到,但是不支持連環嵌套if else ~~~ <body> <div id="app"> <div v-if="isLogin">你好,登錄成功</div> <div v-else>請登錄</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isLogin: false } }) </script> ~~~ # v-show 判斷是否顯示,如果false,他的css是display:none的,f12能看到 ~~~ <div v-show="isLogin">你好,登錄成功</div> ~~~ # v-for 模板中循環,想讓那個標簽循環就放在那個標簽上,不要放在父級上 ~~~ <div id="app"> <ul> <li v-for="item in items"> {{item}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [53, 23, 67, 24, 12] } }) </script> ~~~ ## 排序我們已經順利的輸出了我們定義的數組，但是我需要在輸出之前給數組排個序，那我們就用到了Vue的computed:屬性。 ~~~ computed:{ sortItems:function(){ return this.items.sort(); } } ~~~ 我們在computed里新聲明了一個對象sortItems，如果不重新聲明會污染原來的數據源，這是Vue不允許的，所以你要重新聲明一個對象。如果不重新聲明報錯： ![](https://box.kancloud.cn/20f89539a850b4e41a6b48489556d204_1352x122.png) ~~~ <div id="app"> <ul> <li v-for="item in sortItems"> {{item}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [53, 23, 67, 24, 12] }, computed: { sortItems: function () { return this.items.sort(); } } }) </script> ~~~ **注意** 他的排序并不是按照數字來的,而是按照第一個數字來的我們可以自己編寫一個方法sortNumber，然后傳給我們的sort函數解決這個Bug。 ~~~ function sortNumber(a,b){ return a-b } ~~~ 用法 ~~~ <div id="app"> <ul> <li v-for="item in sortItems"> {{item}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [53, 23, 7, 24, 12] }, computed: { sortItems: function () { return this.items.sort(sortNumber); } } }); function sortNumber(a, b) { return a - b; } </script> ~~~ ## json 輸出json,并給他加上序號 ~~~ <div id="app"> <ul> <li v-for="(student,index) in students"> {{index}}-{{student.name}} --- {{student.age}} </li> </ul> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { students: [{ name: 'a', age: 1 }, { name: 'b', age: 2 }, { name: 'c', age: 3 }, { name: 'd', age: 4 }, ] } }) ~~~ 在控制臺里，輸入 app.students.push({ name: 'e',age: f})，你會發現列表最后添加了一個新的排序，我們先加一個原生的對象形式的數組排序方法： ~~~ //數組對象方法排序: 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)); }); ~~~ 有了數組的排序方法，在computed中進行調用排序 ~~~ sortStudent:function(){ return sortByKey(this.students,'age'); } ~~~ 注意：vue低版本中 data里面的items和computed里面可以一樣，但是高版本，是不允許相同名稱。有很多小伙伴踩到了這個坑，這里提醒學習的小伙伴 ~~~ <script type="text/javascript"> var app = new Vue({ el: '#app', data: { students: [{ name: 'a', age: 1 }, { name: 'b', age: 21 }, { name: 'c', age: 3 }, { name: 'd', age: 4 }, ] }, computed: { sortStudent: function () { return sortByKey(this.students, 'age'); } } }); //數組對象方法排序: 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> ~~~