深入理解vue.js2.0指令v-for使用及索引获取  


   v-for

                   
               基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：                 
<div v-for="item in items">
  {{ item.text }}
</div>

              另外也可以为数组索引指定别名（或者用于对象的键）： 
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

              v-for  默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个  key  的特殊属性: 
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

  索引

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。 
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
结果：
   .Parent - 0 -Foo
   .Parent - 1 -Bar
注意：在2.0版是1~10中，$index已废除，索引 (item,index)。

       你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>  

  Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如： 
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

   对象迭代 v-for

你也可以用  v-for  通过一个对象的属性来迭代。 
<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})
结果：
     .John
     .Doe
     .30
你也可以提供第二个的参数为键名： 
<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>
第三个参数为索引： 
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>  

   整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。 
<div>
  <span v-for="n in 10">{{ n }}</span>
</div>
结果：
 1 2 3 4 5 6 7 8 9 10
注意：在1.0版，0~9 在2.0版是1~10。

  组件 和 v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。
 
<my-component v-for="item in items"></my-component>
然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用  props  ： 
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>

不自动注入  item  到组件里的原因是，因为这使得组件会紧密耦合到  v-for  如何运作。在一些情况下，明确数据的来源可以使组件可重用。
下面是一个简单的 todo list 完整的例子： 
<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})
结果：
    想知道，自己敲下，不就知道啦大笑大笑





















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