2. 程式人生 > 實用技巧 >Vue.js — 列表渲染

Vue.js — 列表渲染

阿新 • • 發佈：2021-01-20

1.列表渲染

1.1 v-for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
			
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<ul>
				<li v-for="item in items" :key="item.id">
					{{item.message}}
				</li>
			</ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					items: [
						{id: 1, message: 'Foo'},
						{id: 2, message: 'Bar'}
					]
                }
            });
        </script>
    </body>
</html>

我們可以用v-for指令基於一個數組來渲染一個列表。item in items的items是源資料陣列，item是被迭代的陣列元素的別名。
注意：一般情況下，我們會給<li>指定key，這裡的:key表示資料繫結。

v-for支援第二個引數，即當前項的索引。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
			
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<ul>
				<li v-for="(item, index) in items" :key="index">
					{{item.message}}
				</li>
			</ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					items: [
						{id: 1, message: 'Foo'},
						{id: 2, message: 'Bar'}
					]
                }
            });
        </script>
    </body>
</html>

我們可以用v-for指令遍歷一個物件的屬性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
			
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<ul>
				<!-- <li v-for="value in object"> -->
				<!-- <li v-for="(value, name) in object"> -->
				<li v-for="(value, name, index) in object" :key="index">
					{{value}}
				</li>
			</ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					object: {
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2016-04-10'
					}
                }
            });
        </script>
    </body>
</html>

1.2 陣列更新檢測

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item, index) in items" :key="index">
                    {{item.message}}
					<button @click="updateItem(index, {message: 'Baz'})">更新</button>
					<button @click="deleteItem(index)">刪除</button>
                </li>
            </ul>
			<button @click="addItem({message: 'Boo'})">新增</button>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    items: [
                        {message: 'Foo'},
                        {message: 'Bar'}
                    ]
                },
				methods: {
					deleteItem: function(index){
						this.items.splice(index, 1)
					},
					updateItem: function(index, newItem){
						this.items.splice(index, 1, newItem)
					},
					addItem: function(newItem){
						this.items.push(newItem)
					}
				}
            });
        </script>
    </body>
</html>

注意：上面的splice和push方法不是陣列原生的方法，而是Vue為了偵聽陣列內部資料而重寫的方法。我們稱這些方法為變異方法（mutation method）。
變異方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

相比之下，非變異方法（non-mutating method）不會改變原始陣列，而是返回一個新陣列。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<input type="text" v-model="searchName">
            <ul>
                <li v-for="(item, index) in filteritems" :key="index">
                    {{item.message}}
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					searchName: '',
                    items: [
                        {message: 'Foo'},
                        {message: 'Bar'},
						{message: 'Baz'},
						{message: 'Boo'}
                    ]
                },
				computed: {
					filteritems: function(){
						const {searchName, items} = this
						let arr = [...items]
						if(searchName.trim()){
                            // filter()為非變異方法
							arr = items.filter(item => item.message.toLocaleLowerCase().indexOf(searchName.toLocaleLowerCase())!==-1)
						}
						return arr;
					}
				}
            });
        </script>
    </body>
</html>

1.3 無法檢測的陣列變動

① 利用索引直接設定一個數組項，比如vm.items[indexOfItem] = newValue。
② 修改陣列的長度，比如vm.items.length = newLength。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

    </style>
    <!-- <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> -->
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">
            {{item}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: ['a', 'b', 'c']
        }
    });
    vm.items[1] = 'x'
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

    </style>
    <!-- <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> -->
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">
            {{item}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: ['a', 'b', 'c']
        }
    });
    Vue.set(vm.items, 1, 'x')
</script>
</body>
</html>

我們可以使用Vue.set(target, propertyName/index, value)來實現響應式資料。
注意：物件變更檢測注意事項

1.4 在<template>上使用v-for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<ul>
				<template v-for="(item, index) in items" :key="index">
					<li>{{item.name}}</li>
					<li>----------</li>
				</template>				
			</ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    items: [
						{name:'張飛'},
						{name:'李四'},
					]
                }
            });
        </script>
    </body>
</html>

我們可以使用帶有v-for的<template>來迴圈渲染一段包含多個元素的內容。

注意：我們不推薦在同一元素上使用v-if和v-for。當它們處於同一節點，v-for的優先順序比v-if更高。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
			<ul v-if="todos.length">
			  <li v-for="todo in todos">
				{{ todo }}
			  </li>
			</ul>
			<p v-else>No todos left!</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    todos: []
                }
            });
        </script>
    </body>
</html>

1.5 在元件上使用v-for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
            
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.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>

任何資料都不會被自動傳遞到元件裡，因為元件有自己獨立的作用域。
為了把迭代資料傳遞到元件裡，我們要使用prop。
注意：這裡is="todo-item"實現的效果和<todo-item>相同，但是可以避免一些潛在的瀏覽器解析錯誤。
參考：

相關推薦

Vue.js — 列表渲染

1.列表渲染 1.1 v-for <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <style>

Vue.js 條件渲染、列表渲染、事件處理、表單輸入繫結基本使用

條件渲染、列表渲染、事件處理、表單輸入繫結基本使用 條件渲染 v-if 基本用法

vue：列表渲染v-for

我們可以用 v-for 指令基於一個數組來渲染一個列表。 v-for指令需要使用”item in items “形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。

vue學習---列表渲染(v-for)

v-for指令: 1.用於展示列表資料 2.語法：v-for=\"(item, index) in xxx\" :key=\"yyy\" 3.可遍歷：陣列、物件、字串（用的很少）、指定次數（用的很少）

詳解Vue的列表渲染

目錄1. v-for:遍歷陣列內容（常用）2. v-for:遍歷物件屬性（常用）3.遍歷字串（不常用）4.遍歷指定次數（不常用）5.key 的作用和原理1.虛擬DOM中key的作用:2.對比規則:3.用index作為key可能會引發的問題:4.開發中如何

vue長列表渲染元件

<template> <div> <!-- 能滾動的盒子 --> <div class=\"viewport\" ref=\"viewport\" @scroll=\"scrollListener\" :style=\"`height:${boxH}px`\">

vue學習——列表渲染

用v-for把一個數組對映為一組元素 我們可以用v-for指令基於一個數組來渲染一個列表。v-for指令需要使用item in items形式的特殊語法，其中 items 是源資料陣列，而item則是被迭代的陣列元素的別名。

vue,element列表大資料卡頓問題,vue列表渲染慢，element表格渲染慢，表格渲染慢（卡），表格全選卡，使用umy-ui

https://u-leo.github.io/umy-ui/docs/index.html https://github.com/u-leo/umy-ui ### umy-ui 一套為開發者準備的基於 Vue 2.0 的桌面端元件庫，完美解決表格萬級資料渲染卡頓，編輯表格卡頓問題

vue列表渲染

<!--1. 列表顯示陣列: v-for / index <h2>測試: v-for 遍歷陣列</h2><ul><li v-for=\"(p, index) in persons\" :key=\"index\">{{index}}--{{p.name}}--{{p.age}}</li></ul>

vue利用 object.freeze 提升列表渲染效能

一、概述 　　我們應該都知道 vue會通過 object.defineProperty 對資料進行劫持，來實現檢視響應資料的變化，然而有些時候我們的元件就是純粹的資料展示，不會有任何改變，我們就不需要 vue來劫持我們的資料，在大量

02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控制元件繫結

vue基礎 宣告式渲染 Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統

Vue.js 中的無渲染行為插槽

在本文中我們討論vue中的無渲染插槽模式能夠幫助解決哪些問題。 在vue.js2.3.0 中引入的作用域插槽顯著提高了元件的可重用性。無渲染元件模式應運而生，解決了提供可重用行為和可插入表示的問題。

vue從後臺渲染文章列表以及根據id跳轉文章詳情詳解

前言： vue裡面怎樣從後臺渲染列表，怎麼根據文章的id獲取文章的具體內容。以及值與值之間的傳遞，vue-router 裡query和params的區別及使用。

vue指令 v-for 資料遍歷 列表渲染

技術標籤：vuev-for 目錄 語法列表渲染輸出圖片 語法 <div v-for="item in items">{{ item.text }}</div>

vue六：vue基礎之列表渲染和key值設定

渲染： 簡單示例 運算元組即可改變資料 遍歷的時候取索引值 遍歷物件 由於物件沒有索引，但是有key，所以遍歷的時候可以取到key

Vue列表渲染：v-for的使用

使用v-for，同時指定key(用v-bind繫結) <!DOCTYPE html> <html lang=\"en\"> <head>

Vue前端高效開發之列表渲染指令

v-for指令 說起列表不得不提起迴圈，v-for指令便是可以在中實現迴圈的操作。 v-for指令是基於一個數組來重複渲染的指令，通常就用於顯示列表和表格。

Vue（8）列表渲染v-for

迴圈 在模板中可以用v-for指令來迴圈陣列，物件等。 迴圈陣列 我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的

VUE學習十七，列表渲染v-for

一、我們可以用 v-for 指令基於一個數組來渲染一個列表。 <ul id=\"example-1\">

vue+element 列表一列條件渲染

在template中列表渲染加上formatter方法 <el-table-columnprop=\"rule_type\"label=\"規則型別\"align=\"center\":formatter=\"formatter\"/>