|
|
@@ -0,0 +1,99 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ 关键字搜索:
|
|
|
+ <input type="text" placeholder="请输入关键字" v-model="keywords" />
|
|
|
+ <br />
|
|
|
+ <div id="main" v-for="(item,index) in newList" :key="index">
|
|
|
+ {{index + 1}}.我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
|
|
|
+ </div>
|
|
|
+ <!-- @click 点击事件 -->
|
|
|
+ <button @click="sortType = 1">升序</button>
|
|
|
+ <button @click="sortType = 2">降序</button>
|
|
|
+ <button @click="sortType = 0">默认顺序</button>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ data: {
|
|
|
+ arr: [
|
|
|
+ {
|
|
|
+ name: "Lucy",
|
|
|
+ age: 11,
|
|
|
+ sex: "女",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "LiLi",
|
|
|
+ age: 31,
|
|
|
+ sex: "男",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "八戒",
|
|
|
+ age: 21,
|
|
|
+ sex: "男",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "八卦",
|
|
|
+ age: 23,
|
|
|
+ sex: "男",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "孙悟空",
|
|
|
+ age: 27,
|
|
|
+ sex: "男",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "唐僧",
|
|
|
+ age: 33,
|
|
|
+ sex: "女",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ keywords: "",
|
|
|
+ person: [],
|
|
|
+ sortType: 0
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ newList() {
|
|
|
+ this.person = this.arr.filter((item) => {
|
|
|
+ return item.name.indexOf(this.keywords) !== -1
|
|
|
+ })
|
|
|
+ /**
|
|
|
+ * 升序 降序
|
|
|
+ * sort
|
|
|
+ */
|
|
|
+ if(this.sortType) {
|
|
|
+ // 排序
|
|
|
+ this.arr.sort((a,b)=>{
|
|
|
+ // if(this.sortType === 1) {
|
|
|
+ // console.log("111")
|
|
|
+ // return b.age - a.age;
|
|
|
+ // } else if(this.sortType === 2) {
|
|
|
+ // console.log("222")
|
|
|
+ // return (a.age - b.age);
|
|
|
+ // }
|
|
|
+ // vue2.0框架 数据变化 视图未更新 ？ 需要通过数据劫持去解决
|
|
|
+ return this.sortType === 1 ? b.age - a.age : a.age - b.age;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(this.person,'333')
|
|
|
+ return this.person;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ upSort() {
|
|
|
+ console.log(this.person,'3333')
|
|
|
+ this.person = this.person.sort((a,b) => {
|
|
|
+ return a.age - b.age;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }).$mount("#app");
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e