vue中的列表渲染

最新推荐文章于 2024-06-01 19:06:08 发布

仙女不下凡

最新推荐文章于 2024-06-01 19:06:08 发布

阅读量160

点赞数

分类专栏： Vue知识点集合文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_55181759/article/details/120154889

版权

Vue知识点集合专栏收录该内容

7 篇文章 0 订阅

订阅专栏

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🍓 欢迎点赞👍 收藏⭐ 留言📝 如有错误敬请指正！

🌴1.列表的基本使用

🌞 在vue中列表的形成，主要是运用到v-for指令创建列表，语法结构如下👇其中v-for可以循环数组、对象、字符串或者指定次数。

<body>
  <div id="root">
    <-- 1.遍历数组 -->
    <ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul>

    <-- 2.遍历对象 -->
    <ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul>

    <-- 3.遍历字符串 -->
    <ul><li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li></ul>

    <-- 4.遍历指定次数 (用得少) -->
    <ul><li v-for="(number,index) of 5" :key="index">{{number}}-{{index}}</li></ul>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: 'root',
    data: {
     persons: [
       {id:'001',name:'张三',age:'18'},
       {id:'002',name:'李四',age:'17'},
       {id:'003',name:'王五',age:'18'},
     ],
     car: {name:'奥迪A8',price:'70万',color:''},
     str: 'hello'
    }
  })
</script>

🌴2.遍历列表时key的作用

🌞 思考一个问题key在其中是什么作用呢？ 在真实开发中key的值非常不推荐绑定index，因为某些情况下会出现一些问题，一般key值为后台返回数据中的 id等唯一标识，这是为什么呢？
🌞 所以请看以下代码来理解，为什么不推荐key的值为index！

<body>
  <div id="root">
    <button @click.once="add">添加一个老刘</button>
    <ul>
      <li v-for="(p,index) in persons" :key="index">  /这里值是index,出现问题input框中的值串行/
        {{p.name}}-{{p.age}}
        <input type="text"/>
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: 'root',
    data: {
     persons: [
       {id:'001',name:'张三',age:'18'},
       {id:'002',name:'李四',age:'17'},
       {id:'003',name:'王五',age:'18'},
     ]
    },
    methods: {
      add(){
        const p = {id:'004',name:'老刘',age:21}
        this.persons.unshift(p)
      }
    }
  })
</script>

🌞 下面用图分别解释一下key的值为index和唯一标识时候的形成过程。
key的值为index

key值为唯一标识
🌞 所以来解答一下面试题：react、vue中的key有什么作用? (key的内部原理)
🌼 虚拟DOM中key的作用： key是虚拟DOM对象的标示，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。对比规则❶旧虚拟DOM中找到了与新虚拟DOM相同的key；若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。❷旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面。
🌼 用index作为key可能会引发的问题： ❶若对数据进行：逆序添加、逆序删除破坏操作( 会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低 )。⑵如果结构中还包含输入类的DOM( 会产生错误DOM更新 ==> 界面有问题 )。
🌼 开发中如何选择key： 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。

🌴3.列表过滤filter()

🌞 这里讲一个方法filter()主要在列表中经常使用。页面效果如下👇
列表过滤filter()
🌞 代码如下👇 该代码运用watch监视属性，我再改文章中讲过具体用法，地址：https://editor.csdn.net/md/?articleId=120140354

<body>
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
      <li v-for="(p,index) of filPerons" :key="index">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: '#root'
    data: {
      keyWord:'',
      persons: [
        {id:'001',name:'马冬梅',age:'19',sex:'女'},
        {id:'002',name:'周冬雨',age:'20',sex:'女'},
        {id:'003',name:'周杰伦',age:'21',sex:'男'},
        {id:'004',name:'温兆伦',age:'22',sex:'男'}
      ],
      filPerons: [],
    }
    watch: {  /这里也可以不用watch, 我就是举个例子/
      keyWord: {
      immediate: true,
      handler(val){
        this.filPerons = this.persons.filter((p)=>{
          return p.name.indexOf(val) !== -1
        })
      }
    }
  })
</script>

🌴4.列表排序sort()

🌞 这里讲一个方法列表排序sort()在列表中也经常使用。页面效果 & 代码如下👇
列表排序sort()

<body>
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button>年龄升序</button>
    <button>年龄降序</button>
    <button>原顺序</button>
    <ul>
      <li v-for="(p,index) of filPerons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>
</body>

<script  type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: '#root'
    data: {
      keyWord:'',
      sortType:0,  //0原顺序,1降序,2升序
      persons: [
        {id:'001',name:'马冬梅',age:'19',sex:'女'},
        {id:'002',name:'周冬雨',age:'20',sex:'女'},
        {id:'003',name:'周杰伦',age:'21',sex:'男'},
        {id:'004',name:'温兆伦',age:'22',sex:'男'}
      ]
    },
    computed: { 
      filPerons(){
        const arr = this.persons.filter((p) => {
          return p.name.indexOf(this.keyWord) !== -1
        })
        //判断一下是否需要排序
        if(this.sortType){
          arr.sort((a,b) => { /sort(方法)/
            return this.sortType === 1 ? b.age-a.age : a.age-b.age
          })
        }
        return arr
      }
    }
  })
</script>