七、Vue循环遍历

最新推荐文章于 2024-10-09 11:07:55 发布

不会Java怎么找女朋友

最新推荐文章于 2024-10-09 11:07:55 发布

阅读量309

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lin_willen/article/details/112255606

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-v-for遍历数组

1.1 代码实战

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-for遍历数组</title>
</head>
<body>

<div id="app">
  <!--  1.在遍历的过程中，没有使用索引值（下标值）-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
  <!--  2.在遍历的过程中，获取索引值-->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
  </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      names:['key','Ting','james','kobe','curry']
    }
  })
</script>
</body>
</html>

1.2 运行结果

在这里插入图片描述

02-v-for遍历对象

2.1 代码实战

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-for遍历对象</title>
</head>
<body>

<div id="app">
  <!--  直接输出-->
  <ul>
    <li>{{info.name}}</li>
    <li>{{info.age}}</li>
    <li>{{info.height}}</li>
    <li>{{info.weight}}</li>
  </ul>
  <hr>
  <!--  1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  <hr>
  <!--  2.获取key和value 前面为value，后面为key 格式(value,key)-->
  <ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
  </ul>
  <hr>
  <!--  3.获取key和value，index  格式：(value,key,index)-->
  <ul>
    <li v-for="(value,key,index) in info">[{{index}}]{{key}}:{{value}}</li>
  </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      info :{
        name:'key',
        age:20,
        height:1.83,
        weight:68.5,
      }
    }
  })
</script>
</body>
</html>

2.2 运行结果

在这里插入图片描述

03-v-for组件的key的属性

3.1 v-for组件的key的属性

1、为什么需要这个key属性？

这个其实和Vue的的虚拟DOM的diff算法有关系

2、当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的
即把C更新成F，D更新C，E更新成D，最后插入F，很没有效率

3、所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点

4、key的作用主要是为了高效的更新虚拟DOM

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-for组件的key的属性</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
    <hr>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      //splice向数组中插入值，第一个参数是从哪个位置开始，第二个参数是删除几个元素，第三个参数是插入的值
      letters:['A','B','C','D','E']
    }
  })
</script>
</body>
</html>

04-数组中的响应式方法

4.1 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-数组中的响应式方法</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <hr>
  <button @click="btnPushClick">末尾添加元素</button><br>
  <hr>
  <button @click="btnPopClick">删除末尾元素</button><br>
  <hr>
  <button @click="btnShiftClick">删除首位元素</button>
  <hr>
  <button @click="btnUnshiftClick">首位添加元素</button>
  <hr>
  <button @click="btnSpliceClick">删除元素/插入元素/替换元素</button>
  <hr>
  <button @click="btnSortClick">排序</button>
  <hr>
  <button @click="btnReverseClick">反序</button>
  <hr>
  <button @click="btnIndexClick">根据索引修改数据(非响应式）</button>
  <hr>
  <button @click="btnVueSetClick">根据索引修改数据(响应式)</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      letters:['A','B','C','D','E']
    },
    methods: {
      btnPushClick() {
        //1.push方法,最后一位添加元素，响应式,数据改变
        this.letters.push('K')
      },
      btnPopClick() {
        //2.pop()删除最后一位元素，响应式，数据改变
        this.letters.pop()
      },
      btnShiftClick() {
        //3.shift()删除第一个元素，响应式，数据改变
        this.letters.shift()
      },
      btnUnshiftClick() {
        //4.unshift()在首位添加元素，响应式，数据改变
        this.letters.unshift('K')
      },
      btnSpliceClick() {
        //5.splice作用：删除元素/插入元素/替换元素
        //splice(start)：第一个参数
        //删除元素：第二个参数传入要删除几个元素(如果没有传值，就删除start后面所有）
        //替换元素：第二个参数，表示我们要替换结果元素，后面是用于替换的元素
        //插入元素：第二个参数：0，并且后面跟上要插入的元素
      },
      btnSortClick() {
        //排序，从小到大，响应式
        this.letters.sort()
      },
      btnReverseClick() {
        //反序，响应式
        this.letters.reverse()
      },
      btnIndexClick() {
        //通过索引直接修改，数据被改变，但是不是响应式的，页面不会改变
        this.letters[0] = 'K'
      },
      btnVueSetClick() {
        //set(要修改的对象，索引值，修改后的值) 数据改变，响应式
        Vue.set(this.letters, 0, 'K')
      }
    }
  })
</script>
</body>
</html>