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> ~~~