码迷,mamicode.com
首页 > 其他好文 > 详细

vue指令v-for和key属性

时间:2019-11-04 13:22:03      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:顺序   userinfo   现在   节点   name   字符串   使用   除了   model   

一、解释

1. 迭代数组
 
<ul>
  <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
</ul>
 

2. 迭代对象中的属性

  <!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
 

3. 迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>
 
4.2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “**就地复用**” 策略。如果数据项的顺序被改变,Vue将**不是移动 DOM 元素来匹配数据项的顺序**, 而是**简单复用此处每个元素**,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,**以便它能跟踪每个节点的身份,从而重用和重新排序现有元素**,你需要为每项提供一个唯一 key 属性。
 
二、实例
 
1.循环普通数组
<body>
  <div id="app">
    <p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>
</body>

 

2.循环对象数组
<body>
  <div id="app">
    <p v-for="(user, i) in list">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}</p>
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        list: [
          { id: 1, name: zs1 },
          { id: 2, name: zs2 },
          { id: 3, name: zs3 },
          { id: 4, name: zs4 }
        ]
      },
      methods: {}
    });
  </script>
</body>

 

3.循环对象

<body>
  <div id="app">
    <!-- 注意:在遍历对象身上的键值对的时候, 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p>
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        user: {
          id: 1,
          name: 托尼·屎大颗,
          gender: 
        }
      },
      methods: {}
    });
  </script>
</body>

 

4.迭代数字

<body>
  <div id="app">
    <!-- in 后面我们放过  普通数组,对象数组,对象, 还可以放数字 -->
    <!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {},
      methods: {}
    });
  </script>
</body>

 

5.循环中key属性的使用

<body>
  <div id="app">
    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>
    <!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
    <!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
    <!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        id: ‘‘,
        name: ‘‘,
        list: [
          { id: 1, name: 李斯 },
          { id: 2, name: 嬴政 },
          { id: 3, name: 赵高 },
          { id: 4, name: 韩非 },
          { id: 5, name: 荀子 }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>
</body>

 

vue指令v-for和key属性

标签:顺序   userinfo   现在   节点   name   字符串   使用   除了   model   

原文地址:https://www.cnblogs.com/wangyuxue/p/11791306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!