1、數(shù)組的使用
<div id="app">
? ? <ul>
? ? ? ? <!--todos數(shù)據(jù)源-->
? ? ? ? <!--item 數(shù)組元素的別名 （數(shù)據(jù)源中數(shù)據(jù)）-->
? ? ? ? <li v-for="item in todos">
? ? ? ? ? ? {{item}}
? ? ? ? </li>
? ? </ul>
? ? <ul>
? ? ? ? <li v-for="(item,index) in todos">
? ? ? ? ? ? {{item}}----{{index}}----{{message}}
? ? ? ? </li>
? ? </ul>
? ? {{getTodos()}}
</div>
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? message: '1111',
? ? ? ? ? ? todos: [
? ? ? ? ? ? ? ? {text: '學(xué)習(xí)JavaScript'},
? ? ? ? ? ? ? ? {text: '學(xué)習(xí)css'},
? ? ? ? ? ? ? ? {text: '學(xué)習(xí)Vue'},
? ? ? ? ? ? ? ? {text: '做個(gè)項(xiàng)目'}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? getTodos() {
? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? * 第一個(gè)參數(shù) item 數(shù)組元素的別名 （數(shù)據(jù)源中數(shù)據(jù)）
? ? ? ? ? ? ? ? * 第二個(gè)參數(shù) index 下標(biāo) 索引
? ? ? ? ? ? ? ? * 第三個(gè)參數(shù) data? 數(shù)據(jù)源
? ? ? ? ? ? ? ? */
? ? ? ? ? ? ? ? this.todos.forEach((item, index, data) => {
? ? ? ? ? ? ? ? ? ? console.log(index, item, data)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
2、對(duì)象的使用
<body>
<script src="../libs/vue.js"></script>
<div id="app">
? ? <p v-for="value in object">
? ? ? ? {{value}}
? ? </p>
? ? <p v-for="(value, key) in object">
? ? ? ? {{value}}----{{key}}
? ? </p>
? ? <p v-for="(value, key, index) in object">
? ? ? ? {{key}}---{{value}}----{{index}}
? ? </p>
? ? <!--v-model 雙向綁定-->
? ? <input type="text" placeholder="請(qǐng)輸入key" v-model="key"/>
? ? <input type="text" placeholder="請(qǐng)輸入value" v-model="value"/>
? ? <button @click="add">添加字段</button>
</div>
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? key: '',
? ? ? ? ? ? value: '',
? ? ? ? ? ? object: {
? ? ? ? ? ? ? ? title: "叫標(biāo)題",
? ? ? ? ? ? ? ? author: '叫作者',
? ? ? ? ? ? ? ? pushlished: '2021-11-11'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? //往對(duì)象里添加字段
? ? ? ? ? ? ? ? /**(第一種)
? ? ? ? ? ? ? ? * 第一個(gè)參數(shù)：添加的對(duì)象
? ? ? ? ? ? ? ? * 第二個(gè)參數(shù)：key
? ? ? ? ? ? ? ? * 第三個(gè)參數(shù)：value
? ? ? ? ? ? ? ? */
? ? ? ? ? ? ? ? // Vue.set(this.object, 'tel', '177****1661')
? ? ? ? ? ? ? ? /**（第二種）
? ? ? ? ? ? ? ? * 第一個(gè)參數(shù)：添加的對(duì)象
? ? ? ? ? ? ? ? * 第二個(gè)參數(shù)：key
? ? ? ? ? ? ? ? * 第三個(gè)參數(shù)：value
? ? ? ? ? ? ? ? */
? ? ? ? ? ? ? ? this.$set(this.object, this.key, this.value)
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</body>
3、循環(huán)數(shù)字
<body>
<script src="../libs/vue.js"></script>
<div id="app">
? ? <!--number 從1-->
? ? <div v-for="number in 5">
? ? ? ? {{number}}
? ? </div>
? ? <div v-for="(number,index) in 5">
? ? ? ? {{number}}---{{index}}
? ? </div>
</div>
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? },
? ? })
</script>
</body>
注意：
當(dāng)Vue 正在更新使用?v-for渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并且確保它們?cè)诿總€(gè)索引位置正確渲染。
為了給Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一?key attribute。
例：
<div v-for="item in items"?v-bind:key="item.id">?
因?yàn)樗荲ue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，key?并不僅與?v-for?特別關(guān)聯(lián)。
注：
不要使用對(duì)象或數(shù)組之類的非基本類型值作為?v-for?的?key。請(qǐng)用字符串或數(shù)值類型的值。
不推薦同時(shí)使用?v-if?和?v-for。
當(dāng)?v-if?與?v-for?一起使用時(shí)，v-for?具有比?v-if?更高的優(yōu)先級(jí)。
