对数组和对象进行遍历和修改
1、对数组进行循环
v-for进行循环,有两个参数(item,index)
注意:template可以成为占位符,在DOM里面不显示
2、 修改数组的时候,不能直接通过下标去增加修改删除
(1)可以用过push/pop/shift/unshift/splice/sort/reverse方法
(2)也可以直接改变(重新定义)list数组的整体 (var list = [ ])
(3)全局的Vue.set(app7.list,1<此处代表下标>,2)
局部的app7.$set(app7.list,1<此处代表下标>,2)
3、对对象进行循环
v-for进行循环,有三个参数(item,index,key)
4、增加对象的时候
(1)通过重新定义引用的对象 (var obj = { })
(2)set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)
局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”)
- <!-- v-for的使用 -->
- <div id="app7">
- // 对数组进行循环
- <template v-for="(item,index) of list" :key="item.id">
- <div>
- {{item.text}} ---- {{index}}
- </div>
- <span>
- {{item.text}} ---- {{index}}
- </span>
- </template>
- //对对象进行循环
- <template v-for="(item,index,key) of obj">
- <div>
- {{item}} ---- {{index}}-----{{key}}
- </div>
- </template>
- </div>
- <script>
- var app7 = new Vue({
- el: '#app7',
- data: {
- list: [
- {
- id: "1",
- text: '1'
- },
- {
- id: "2",
- text: '2'
- },
- {
- id: "3",
- text: '3'
- },
- ],
- obj: {
- name: 'mao',
- age: 28,
- address: 'liulin'
- }
- }
- })
- </script>
修改数组和对象的特殊情况以及修改方法
div部分
- ? <div id="root">
- ? ? {{title}}
- ? ? <my-header></my-header>
- ? ? {{list}}
- ? ? {{obj}}
- ? </div>
- ? <div id="app">
- ? ? {{title}}
- ? </div>
script部分
- ? <script>
- ? ? // 全局定义的组件
- ? ? Vue.component('my-header', {
- ? ? ? template: `
- ? ? ? ? <header>title</header>
- ? ? ? `
- ? ? })
- ? ? // 实例化Vue
- ? ? var vm = new Vue({
- ? ? ? el: '#root',
- ? ? ? data: {
- ? ? ? ? title: 'hello',
- ? ? ? ? list: ['a', 'b'],
- ? ? ? ? obj: {
- ? ? ? ? ? x: 0
- ? ? ? ? }
- ? ? ? }
- ? ? })
- ? ? var vm2 = new Vue({
- ? ? ? el: '#app',
- ? ? ? data: {
- ? ? ? ? title: 'world'
- ? ? ? }
- ? ? })
- ? </script>
修改数组的两个特殊情况
1.arr.length = 0, 不具备响应特性
2.arr[0] = 100, 不具备响应特性
- 修改对象的特殊情况
- 添加obj.x,x属性,也不具备响应特性
修补方法
- vm.$set(target, propertyName/index, value)//实例化一个vue,试用贴set属性改变对应的value值
- Vue.set(target, propertyName/index, value)//直接使用vue的属性,要与实例化vue方法区分,这个没有$
- vm.$forceupdate()
以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。