(十六)、基本列表渲染 (v-for)
1.使用v-for遍历数组
- 这里我们必须要设置一个key值，虽然key值已经不被报错。但是我们还是要设置，因为我们的数据要根据key进行后期维护.这里我们要进行绑定 data的数据
- v-for,里面隐含一个遍历出来的 Value 以及 index
- Vue的遍历借助的是 for in 循环的操作
- 我们的
表达式要写成Value的值并不是data区域的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表信息</h2> <!-- 使用v-for 遍历数组 --> <ul> <!-- 在这里我们只需要对列表进行循环即可，传进来的第一个是value，第二个是index.Vue的循环遍历借助于 for in --> <li v-for="(value,index) in persons" :key="persons.id">{ {value.id}}--{ {value.name}}--{ {value.age}}</li> </ul> </div> <script> new Vue({ el: '#root', data: { // 列表信 persons:[ { id:'001',name:'吉士先生1',age:18}, { id:'002',name:'吉士先生2',age:28}, { id:'003',name:'吉士先生3',age:38}, { id:'004',name:'吉士先生4',age:48} ] } }); </script> </body> </html>
2.使用v-for遍历对象
- 这里存放着两个值: 第一个是Value,第二个是 Key值
- 我们RestulMatch里面写的是 Value 并不是data区域里面的数据
- Key值的也要进行单项数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>小汽车信息</h2> <ul> <li v-for="(Value,Key) in car" :key="Key">{ {Value}}</li> </ul> </div> <script> new Vue({ el: '#root', car:{ name:'领克06', price:'13w', color:'灰色' } } }); </script> </body> </html>
3.使用v-for遍历字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- v-for指令: 1.用于展示列表数据 2.语法: v-for='(item,index) in car' :key='item.id' 3.可遍历: 数组 对象 --> <h2>人员列表信息</h2> <!-- 使用v-for 遍历数组 --> <ul> <!-- 在这里我们只需要对列表进行循环即可，传进来的第一个是value，第二个是index.Vue的循环遍历借助于 for in --> <li v-for="(value,index) in persons" :key="persons.id">{ {value.id}}--{ {value.name}}--{ {value.age}}---{ {index}}</li> </ul> <h2>小汽车信息</h2> <ul> <li v-for="(Value,Key) in car" :key="Key">{ {Value}}---{ {Key}}</li> </ul> <h2>遍历字符串</h2> <ul> <li v-for="(Value,index) in str">{ {Value}}---{ {index}}</li> </ul> </div> <script> new Vue({ el: '#root', data: { // 列表信 persons:[ { id:'001',name:'吉士先生1',age:18}, { id:'002',name:'吉士先生2',age:28}, { id:'003',name:'吉士先生3',age:38}, { id:'004',name:'吉士先生4',age:48} ], car:{ name:'领克06', price:'13w', color:'灰色' }, str:'asdsdsd' } }); </script> </body> </html>
(十七)、列表过滤 (filter())
1.⭐JS中Change属性的原生状态⭐
Computed的数据修改会保留原数据，Watch的数据修改不保留原数据
- 当我们失去焦点值得时候，我们的信息才会显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="shuru"> <script type="text/javascript"> const shuru=document.getElementById("shuru"); shuru.addEventListener('change',()=>{ console.log('1'); }) </script> </body> </html>
2.使用watch监听实现
- 我们监听关键字，假如关键字发生变化 我们就进行过滤，并且进行替换
- 过滤一次少一次，回不到过去了。因为这里一直在改变原数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表信息</h2> <!-- 想要对数据加工后再展示，且不想要破坏元数据，最好就使用计算属性 --> <input type="text" v-model="keywords"> <ul> <li v-for="(value,index) in persons" :key="persons.id"> { {value.id}}--{ {value.name}}--{ {value.age}}---{ {index}}</li> </ul> </div> <script> new Vue({ el: '#root', data: { // 列表信 persons: [ { id: '001', name: '马冬梅', age: 18 }, { id: '002', name: '周冬雨', age: 28 }, { id: '003', name: '周杰伦', age: 38 }, { id: '004', name: '温兆伦', age: 48 } ], keywords:'' }, // computed: { // fmtPersons(){ // const {keywords} = this; //这里相当于 const keywords=this.keywords; // return this.persons.filter(p=>p.name.indexOf(keywords)!==-1); // } // } // 使用watch修改元数据。会导致元数据的丢失 watch: { //当检测的数据发生改变的时候，就会调用我们这个方法 keywords(newValue){ const arr=this.persons.filter((p,index)=>{ // array.filter(function(currentValue,index,arr), thisValue) return p.name.indexOf(newValue)!=-1; }); this.persons=arr; // 返回值是过滤后的数组 } } }); </script> </body> </html>
3.const {xxx} = this 在Vue的作用⭐
const { aaa,bbb,ccc}=this; => const aaa=this.aaa; const bbb=this.bbb; const ccc=this.ccc;
⭐4.JS箭头函数参数的简写⭐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <<• 1
