本文目录 ⌄
v-for
遍历数组
<template id="my-app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
movies: [
"星际穿越",
"盗梦空间",
"大话西游",
"教父",
"少年派"
]
}
}
};
Vue.createApp(app).mount("#app");
</script>获取下标方式：
<template id="my-app">
<ul>
<li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li>
</ul>
</template>遍历对象
<template id="my-app">
<h2>个人信息</h2>
<ul>
<!-- 遍历对象 -->
<!-- 拿到的应该是键值对，只写一个拿到的是value -->
<!-- <li v-for="value in info">{{value}}</li> -->
<li v-for="(value, key, index) in info">{{index+1}}-{{key}}-{{value}}</li>
</ul>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
info: {
name: "sk",
age: 18,
height: 1.88
}
}
}
};
Vue.createApp(app).mount("#app");
</script>第一个参数是value，第二个参数是key，第三个参数是下标。
遍历数字
<h2>遍历数字</h2>
<ul>
<li v-for="num in 10">{{num}}</li>
</ul>v-for与template的结合使用
<ul>标签中只推荐使用<li>标签，为了实现样式，需要结合template来使用：
<style>
.divider{
width: 50%;
height: 1px;
border-top: solid #ACC0D8 1px;
}
</style>
<template id="my-app">
<ul>
<template v-for="(value, key) in info">
<li>{{value}}</li>
<li>{{key}}</li>
<li class="divider"></li>
</template>
</ul>
</template>效果如图：
监听数组的修改
对于一些修改数组的方法（不是生成新的数组），这些方法被调用时也会触发视图的更新：
<template id="my-app">
<h2>电影列表</h2>
<ul>
<li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li>
</ul>
<input type="text" v-model="newMovie">
<button @click="addMovie">添加电源</button>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
newMovie: '',
movies: [
"星际穿越",
"盗梦空间",
"大话西游",
"教父",
"少年派"
]
}
},
methods:{
addMovie(){
this.movies.push(this.newMovie);
this.newMovie='';
}
}
};
Vue.createApp(app).mount("#app");
</script>对于生成新数组的方法，需要将数组赋值回去。
v-for中key的作用
主要是在列表元素发生变化时用于最小代价地响应这种变化。
用到的算法为diff算法，主要维护变量i（从前往后匹配的位置），e1（旧列表的最后一个元素位置），e2（新列表最后一个元素位置）。
1.当新旧列表第i个元素的类型和key都相同时，递增i，否则退出循环
2.当旧列表的第e1个元素和新列表的第e2个元素相同时，e1–，e2–，否则退出循环
3.如果新列表长度大于旧列表，就插入剩余元素（i到e2之间）
4.如果新列表长度小于旧列表，就删除剩余元素（i到e1之间）
5.如果两个列表元素相同，就用一个映射来记录可以复用的元素，删除多余的并插入新的。