Vue v-for的使用
1、数组的使用
<div id="app">
<ul>
<!--todos数据源-->
<!--item 数组元素的别名 （数据源中数据）-->
<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: '学习JavaScript'},
{text: '学习css'},
{text: '学习Vue'},
{text: '做个项目'}
]
},
methods: {
getTodos() {
/**
* 第一个参数 item 数组元素的别名 （数据源中数据）
* 第二个参数 index 下标 索引
* 第三个参数 data 数据源
*/
this.todos.forEach((item, index, data) => {
console.log(index, item, data)
})
}
}
})
</script>
2、对象的使用
<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="请输入key" v-model="key"/>
<input type="text" placeholder="请输入value" v-model="value"/>
<button @click="add">添加字段</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
key: '',
value: '',
object: {
title: "叫标题",
author: '叫作者',
pushlished: '2021-11-11'
}
},
methods: {
add() {
//往对象里添加字段
/**(第一种)
* 第一个参数：添加的对象
* 第二个参数：key
* 第三个参数：value
*/
// Vue.set(this.object, 'tel', '177****1661')
/**（第二种）
* 第一个参数：添加的对象
* 第二个参数：key
* 第三个参数：value
*/
this.$set(this.object, this.key, this.value)
}
}
})
</script>
</body>
3、循环数字
<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>
注意：
当Vue 正在更新使用 v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute。
例：
<div v-for="item in items" v-bind:key="item.id">
因为它是Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。
注：
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
