<vue 基础知识 7、循环遍历>
代码结构
一、 01-v-for遍历数组
1、效果
2、代码
01-v-for遍历数组.html
01-v-for遍历数组
- {{item}}
- -----------分割线-----------
- {{index+1}}. {{item}}
二、 02-v-for增加点击事件
1、 效果
鼠标点击哪一行，哪一行变红
2、代码
02-v-for增加点击事件.html
v-for增加点击事件
- {{index}} {{item}}
三、03-遍历对象
1、效果
2、代码
03-遍历对象.html
03遍历对象
- {{index}}-{{key}}-{{value}}
四、04-测试哪些方法是响应式的
1、效果
（1）push()方法 是响应式的
注：向数组中添加一个或多个元素
（2）pop 是响应式的
注：删除数组中最后一个元素
（3）shift() 是相应式的
注：删除数组中第一个元素
（4）unshift() 是相应式的
注：在数组最前面添加元素
（5）splice() 是相应式的
注：删除元素、插入元素、替换元素
删除元素 ：第一个参数表示从哪个元素开始，第二个参数 传入你要删除几个元素
删除所有 ：第二个参数不传
替换元素 ：第二个参数表示我们要替换几个元素，后面的参数是替换参数的内容
追加参数：
<删除>
<替换元素>
<追加元素>
（6）sort() 是相应式的
注：排序
为了展示效果，先把数组中的数据搞乱然后再排序
（7）reverse() 是响应式的
注：内容翻转
8）通过索引值修改数据总的元素 不是响应式的
this.letters[0]='bbbbbb';
（9）这样写是响应式的
Vue.set(this.letters, 0, 'bbbbbb')
2、代码
04-测试哪些方法是响应式的.html
04-哪些方法是响应式的
- {{item}}