vue 基础 循环遍历
一、v-for遍历数组
<div id="app">
<!-- 1.遍历时没有索引值 -->
<ul>
<li v-for='item in names'>{{item}}</li>
</ul>
<!-- 2.在遍历时,获取索引值 -->
<ul>
<li v-for="(item,index) in names">{{index}}-{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
names:['why','kobe','jsm','dos']
}
})
</script>
说明:
1.遍历时可以加索引值 然后用插值表达式 展示
<li v-for="(item,index) in names">{{index}}-{{item}}</li>
二、v-for遍历对象
<div id="app">
<!-- 1.在遍历对象时,只获取一个值,获取到的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.获取key 和额Value 格式(value,key)-->
<ul>
<li v-for="(value,key) in info">{{value}}--{{key}}</li>
</ul>
<!-- 3.获取key 和额Value 格式(value,key,index)-->
<ul>
<li v-for="(value,key,index) in info">
{{value}}--{{key}}--{{index}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
info: {
names: "why",
age: 18,
height: 1.88,
},
},
});
</script>
说明:
1.在 遍历对象时 可以 加入 键名 键值 索引
<li v-for="(value,key,index) in info">
{{value}}--{{key}}--{{index}}
</li>
三、vue中变量数组的方法
<div id="app">
<!-- 加key提高性能 -->
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ["A", "B", "C", "D", "E"],
},
methods: {
btnClick() {
//1.push尾部添加
this.letters.push("aaaa");
//2.pop尾部删除
this.letters.pop();
//3.首位删除
this.letters.shift();
//4.首位添加
this.letters.unshift('6666');
//5.splice(start , 几个 ,)
// 删除(开始位置,删除个数)
// 替换(开始位置,替换个数,替换的元素)
// 插入(开始位置,0,插入的元素)
//6.sort() 排序
this.letters.sort();
//7.反转reverse()
this.letters.reverse()
// 通过索引修改数组中的元素 不是响应式的 不监听
this.letters[0]='bbb'
// 8.set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,0,'bbbbb')
},
},
});
</script>
说明:
1.这些方法都行响应式的