1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 基本列表title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
15 <div id="root">
16 <h2>人员列表(遍历数组)h2>
17 <ul>
18 <li v-for="(p, index) in persons" :key="index">
19 {{p.name}}-{{p.age}}
20 li>
21 ul>
22
23 <h2>汽车信息(遍历对象)h2>
24 <ul>
25 <li v-for="(c, key) in car" :key="key">
26 {{c}}-{{key}}
27 li>
28 ul>
29
30 <h2>遍历字符串(用的少)h2>
31 <ul>
32 <li v-for="(char, index) of str" :key="index">
33 {{char}}-{{index}}
34 li>
35 ul>
36
37 <h2>遍历次数(用的少)h2>
38 <ul>
39 <li v-for="(number, index) of 5" :key="index">
40 {{number}}-{{index}}
41 li>
42 ul>
43 div>
44 body>
45
46 <script type="text/javascript" >
47 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
48 let vm = new Vue({
49 el: "#root",
50 data:{
51 persons:[
52 {id:"001",name:"张三",age:18},
53 {id:"002",name:"李四",age:19},
54 {id:"003",name:"王五",age:20}
55 ],
56 car:{
57 name:"奥迪A6",
58 price:"70w",
59 color:"黑色"
60 },
61 str: "hello"
62 },
63 });
64 script>
65 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 数据过滤与排序title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9 <div id="root">
10 <h2>人员信息h2>
11 <input type="text" v-model="keyWord" />
12 <button @click="orderType = 1">年龄降序button>
13 <button @click="orderType = 2">年龄升序button>
14 <button @click="orderType = 0">默认升序button>
15 <ul>
16 <li v-for="(p, index) in showPersons" :key="p.id">
17 {{p.name}}-{{p.age}}-{{p.sex}}
18 li>
19 ul>
20 div>
21 body>
22
23 <script type="text/javascript" >
24 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
25 // let vm = new Vue({
26 // el: "#root",
27 // data:{
28 // keyWord: '',
29 // persons:[
30 // {id:"001",name:"马冬梅",age:18,sex:"女"},
31 // {id:"002",name:"周冬雨",age:19,sex:"女"},
32 // {id:"003",name:"周杰伦",age:20,sex:"男"},
33 // {id:"004",name:"温兆伦",age:21,sex:"男"},
34 // ],
35 // showPersons:[]
36 // },
37 // watch:{
38 // keyWord(nval, oval){
39 // this.showPersons = this.persons.filter((p)=>{
40 // return p.name.indexOf(nval) !== -1;
41 // });
42 // console.log(this.showPerson)
43 // }
44 // }
45 // });
46 let vm = new Vue({
47 el: "#root",
48 data:{
49 keyWord: '',
50 persons:[
51 {id:"001",name:"马冬梅",age:18,sex:"女"},
52 {id:"002",name:"周冬雨",age:17,sex:"女"},
53 {id:"003",name:"周杰伦",age:20,sex:"男"},
54 {id:"004",name:"温兆伦",age:216,sex:"男"},
55 ],
56 orderType: 0
57 },
58 computed:{
59 showPersons(){
60 const arr = this.persons.filter((p)=>{
61 return p.name.indexOf(this.keyWord) !== -1;
62 });
63 if (this.orderType){
64 arr.sort((a,b)=>{ // 排序
65 return this.orderType === 1 ? b.age - a.age : a.age - b.age;
66 });
67 }
68 return arr;
69 }
70 }
71 });
72 script>
73 html>