Vue中的列表渲染v-for:对数组和对象做循环,以及vue中的set方法
一、将数组内容循环展示到页面上
item是数组的值/内容
data中的list有三个值,把这三个值循环到页面上——vue中的列表渲染,对list做循环,列表中的每一项都放到item中,所以页面上打印出item即可,{{item}}(一般来说list是后端返给前端的一个值,会携带数据库或者id)
为了提升循环显示的性能,我们会给每个循环项加一个唯一的key值,尽量不要使用index作为key值
当我们想动态地(让页面有响应)给list里面添加内容时:(类似于todolist)1、要用数组变异方法 2、改变数据的引用地址 3、set方法
在控制台输入:用的是vm~
1、改变数组数据要用数组变异方法(七个),比如vm.list.push({id:"02",text:"2"}),而利用数组下标改变是无用的,页面不会有响应,比如vm.list[4]={id:"02",text:"2"};七个数组变异方法:push,pop,shift,sort,unshift,reserve,splice
2、改变数据的引用,数组在js中是引用型数据
当要循环两组数据时,需要用template来包裹这两个div标签,并且template并不会被渲染到页面上:
3、set方法可以直接操作数组的每一项
Vue.set(数组,索引,新值)
vm.$set(数组,索引,新值)
修改后:
二、将对象的内容循环展示到页面上
item指的就是对象的值
动态地改变:vm.userInfo.name="Dell lee",这时,页面会跟着改变
如果想要网里面加一项呢,不能直接vm.userInfo.address="123",页面不会跟着改变;
方法一:与数组类似,直接改变引用:
方法二:
1、用vue.set(对象,"键名",“键值")方法改变对象的内容
结果为:
2、vm时vue的实例,那它会有实例的方法set:vm.$set(对象,”键名“,”键值“)