数组: v-for /index。  对象: v-for /key

1.v-for遍历数组

【v-for遍历数组语法】

v-for="item in items"
  •  tems：要遍历的数组，需要在vue的data中定义好；
  • item：迭代得到的数组元素的别名。

【代码例子】

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>

 

2.v-for数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

【v-for数组角标语法】

v-for="(item,index) in items"
  • items：要迭代的数组；
  • item：迭代得到的数组元素别名；
  • index：迭代到的当前元素索引，从0开始。 

【例子】

    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

 3.v-for遍历对象

【v-for遍历对象语法】

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，得到的是对象的值；
  • 2个参数时，第一个参数是值，第二个参数是键；
  • 3个参数时，第三个参数是索引，从0开始。
<div id="app">
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

4.v-for中的key

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 
    这个功能可以有效的提高渲染的效率。
    但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 
【代码例子】

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

【key使用说明】

  • 这里使用了一个特殊语法：:key=""它可以让你读取vue中的属性，并赋值给key属性；
  • 这里我们绑定的key是数组的索引，应该是唯一的。

 

【例子】

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" key="p.id">
      {{p.id}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {id: Date.now(), name: 'xxxx', age: 23})">更新</button>
    </li>    
  </ul>
  <h2>测试: v-for 遍历对象</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
      ]
    },

    methods: {
      deleteP (index) {
       //splice再此处删除一个元素
        this.persons.splice(index, 1)
      },
      updateP (index, newP) {
        console.log(this)
        // this.persons[index].name = newP.name
        // this.persons[index].age = newP.age

        // this.persons[index] = newP // 不会更新界面
        // 删除index，在插入newP
        this.persons.splice(index, 1, newP) // vue重写后的splice方法
        // this.persons = []
      }
    },
  })

  /* 
  Vue的数据绑定如何实现
    1. vue会监视data中所有层次的属性
    2. 对象中的属性数据通过添加set方法来来实现监视
    3. 数组中的元素也实现了监视: 重写数组一系列更新元素的方法
      1). 调用原生对应的方法对元素进行处理
      2). 去更新界面
   */

</script>

5、过滤及排序

<body>
<!--
1. 列表过滤
2. 列表排序
-->
  <div id="app">
    <input type="text" v-model="searchName">
    <ul>
      <li v-for="(p, index) in filterPersons" :key="p.id">
        {{p.id}}--{{p.name}}--{{p.age}}
      </li>
    </ul>
    <button @click="sortType=2">按年龄升序</button>
    <button @click="sortType=3">按年龄降序</button>
    <button @click="sortType=1">原本顺序</button>
  </div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    data: {
      searchName: '',
      sortType: 1, // 排序的类型, 1: 不排序, 2: 升序, 3: 降序
      persons: [
        {id: 1, name: 'Tom', age: 15},
        {id: 2, name: 'Jack', age: 12},
        {id: 4, name: 'Bob', age: 17},
        {id: 6, name: 'Rose', age: 16},
        {id: 8, name: 'Else', age: 13}
      ],
    },

    computed: {
      filterPersons () {
        // 1. 得到依赖数据
        const {sortType, searchName, persons} = this

        // 2. 进行计算处理, 产生结果数据并返回
        // 过滤
        const arr = persons.filter(p => p.name.indexOf(searchName)>=0)

        // 可能需要排序
        if (sortType!==1) {
          arr.sort((p1, p2) => {
            if (sortType===2) { // 升序
              return p1.age - p2.age 
            } else { // 降序
              return p2.age - p1.age
            }
          })
        }

        return arr
      }
    },
  }).$mount('#app')
</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