文章目录

一、当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式。

二、v-for 遍历数组

<body>
  <div id='app'>
    <ul>
      <!-- 1、在遍历的过程中，没有使用我们的索引值(下标值) -->
      <li v-for="item in names">{{item}}</li>
      <br>
      <!-- 2、在遍历的过程中，获取我们的下标值 -->
      <li v-for="(item,index) in names">{{index +"---"+item}}</li>
    </ul>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        names:['Mac book Pro','Mac book Air','Apple','IPhone X']
      },
    })
  </script>
</body>

效果：
在这里插入图片描述

三、v-for 遍历对象

<body>
  <div id='app'>
    <ul>
      <!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是 Value -->
      <li v-for="item in info">{{item}}</li> <!--pengSir 18 1.75-->
      <br>
      <!-- 2、获取key 和value 注意 value是参数1 -->
      <li v-for="(value,key) in info">{{key}}-{{value}}</li>
      <br>
      <!-- 3、获取我们的key value index -->
      <li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
    </ul>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        info:{
          name:"pengSir",
          age:18,
          height:1.75
        }
      },
    })
  </script>
</body>

效果:
在这里插入图片描述

四、v-for的key

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

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

五、Vue当中数组的响应式

vue当中通过操作下标的方法更改数组的话，数据是没有响应式的！

使用splice方法，或vue提供的.set（）方法。
解决办法：

	this.letters.splice(0,1,"bbb")
	Vue.set(this.letters,0,'bbb')

<body>
  <div id='app'>
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">点击</button>
  </div>

  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'c', 'd', 'e']
      },
      methods: {
        btnClick() {
          // 拥有响应式
          // 1、.unshift() 头部添加
          // this.letters.unshift('bbb');

          // 2、.push() 尾部添加
          // this.letters.push('aaa','bbb','ccc') 

          // 3、.shift() 头部删除
          // this.letters.shift();

          // 4、.pop() 尾部删除
          // 4、this.letters.pop()

          // 5、splice(start,length,value)//插入元素/删除元素/替换
          // 删除元素：(start,要删除几个元素)
          //          .splice(1)  删除1后边的所有元素

          // 替换元素: (start,被替换的元素的个数,新的元素)

          // 插入元素: (start,0,要插入的元素)
          // this.letters.splice(1,0,"aa")

          // 6 .sort()  排序
          // this.letters.sort();
          // 7 .reverse() 翻转
          // this.letters.reverse()

          // 没有响应式 通过索引值修改数组元素 
          // this.letters[0]="bbb"

          // 这两种方法拥有响应式
          // this.letters.splice(0,1,"bbb")
          // Vue.set(this.letters,0,'bbb')
        }
      },
    })
  </script>
</body>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue