• Tags
  •         
  • www.breakyizhan.com
  •    

    Vue.js的列表渲染我们一般用的是v-for,那么,v-for一般是用来做什么列表渲染呢?v-for可用于:

    • v-for用于数组
    • v-for用于对象
    • v-for用于模板template
    • v-for用于组件

    Vue.js 的列表渲染 v-for用于数组

    v-for 可以绑定数据到数组来渲染一个列表:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: 'breakyizhan' },
          { name: 'Google' },
          { name: 'Taobao' }
        ]
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js 的列表渲染 v-for用于对象

    v-for 可以通过一个对象的属性来迭代数据,在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <ul>
        <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        object: {
          name: 'Break易站',
          url: 'https://www.breakyizhan.com',
          slogan: '一个程序员的B站!'
        }
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js 的列表渲染 v-for用于模板template

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如:

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <ul>
        <template v-for="site in sites">
          <li>{{ site.name }}</li>
          <li>--------------</li>
        </template>
      </ul>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: 'breakyizhan' },
          { name: 'Google' },
          { name: 'Taobao' }
        ]
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js 的列表渲染 v-for用于组件

    在2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

    我们可以使用官网的一个例子来说明:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="todo-list-example">
      <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input
          v-model="newTodoText"
          id="new-todo"
          placeholder="E.g. Feed the cat"
        >
        <button>Add</button>
      </form>
      <ul>
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todos.splice(index, 1)"
        ></li>
      </ul>
    </div>
    <script>
    Vue.component('todo-item', {
      template: '\
        <li>\
          {{ title }}\
          <button v-on:click="$emit(\'remove\')">Remove</button>\
        </li>\
      ',
      props: ['title']
    })
    
    new Vue({
      el: '#todo-list-example',
      data: {
        newTodoText: '',
        todos: [
          {
            id: 1,
            title: 'Do the dishes',
          },
          {
            id: 2,
            title: 'Take out the trash',
          },
          {
            id: 3,
            title: 'Mow the lawn'
          }
        ],
        nextTodoId: 4
      },
      methods: {
        addNewTodo: function () {
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
          })
          this.newTodoText = ''
        }
      }
    })
    </script>
    </body>
    </html>
    

    注:代码可以复制后在线运行;

    注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同,但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。

     
    转载请保留页面地址:https://www.breakyizhan.com/vue/6688.html