Vue04 -- 计算属性用法(v-for的筛选排序)
<!DOCTYPE html> <html> <head> <title>Vue --- 计算属性用法</title> </head> <body> <div id="app1"> {{prices()}} </div> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script> <script type="text/javascript"> var app1 = new Vue({ el:'#app1', data:{ package1:[ { name:'耳机', price:399, count:2 }, { name:'显示器', price:488, count:3 } ], package2:[ { name:'苹果', price:5, count:6 }, { name:'香蕉', price:12, count:3 }, { name:'梨子', price:7, count:2 } ] }, // computed:{ // reversedText: { // get:function () { // return this.name1+'.'+this.name2; // }, // set:function (newvalue) { // var names = newvalue.split('.'); // this.name1 = names[0]; // this.name2 = names[1]; // } // } // }, methods:{ prices:function () { var price = 0; for (var i = this.package1.length - 1; i >= 0; i--) { price+=this.package1[i].price * this.package1[i].count } for (var i = this.package2.length - 1; i >= 0; i--) { price+=this.package2[i].price * this.package2[i].count } return price } } }) </script> </body> </html>
计算属性实例 --- v-for实现筛选排序：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h2>v-for遍历数组</h2> <input type="text" name="" id="" value="" v-model="searchp"/> <ul> <li v-for="(p,index) in filterpersons" :key='index'> {{index}} -- {{p.name}} -- {{p.age}} </li> </ul> <button @click="sortbtn(1)">升序排列</button> <button @click="sortbtn(2)">降序排列</button> <button @click="sortbtn(0)">原本顺序</button> <h2>v-for遍历对象</h2> <ul> <li v-for="(v,k) in persons[1]" :key='k'> {{k}} -- {{v}} </li> </ul> </div> <script src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ searchp:'', ordertype:0,//0原本，1升序，2降序 persons:[ {name:'aaa',age:18}, {name:'bbb',age:13}, {name:'ccc',age:28}, {name:'ddd',age:51}, {name:'ddd',age:20}, {name:'ddd',age:33}, {name:'ddd',age:23}, ] }, computed:{ filterpersons(){ //取出相关数据 const {searchp,persons,ordertype} = this; //最终需要显示的数组 let fpersons; fpersons = persons.filter(p => p.name.indexOf(searchp)!==-1) if(ordertype!==0){ fpersons.sort(function (p1,p2) { // 返回负数p1在前 //1升序，2降序 if (ordertype == 2) { return p2.age-p1.age } else{ return p1.age-p2.age } }) } return fpersons } }, methods:{ sortbtn(num){ this.ordertype = num } } }) </script> </body> </html>
