Vue循环数组和对象
2018-08-03 本文已影响0人
椰果粒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- key值的使用 -->
<!-- 操作数组时，不能直接用修改下标的方式做
1. 可以生效的方式：pop() push() splice() sort() shift() unshift() reverse()
2. 也可以改变数组的引用地址
3. Vue.set(vm.lists, 0, {userId:10}); 第二个为下标
4. vm.$set(vm.lists, 0, 10);
<template>模板占位符，能够帮忙循环渲染一些东西，但是不会变成标签显示到页面上
数组中的set方法：
-->
<!-- <div v-for="(item,index) of lists" :key="item.id">{{ item.text }} - {{index}}</div> -->
<!-- template占位符 -->
<!-- <template v-for="(item,index) of lists" :key="item.id">
<div>{{item.text}}</div>
</template> -->
<!-- 循环对象 -->
<!-- 直接加对象属性和值不能循环出来 比如：userInfo.address = "beijing" 是不管事的-->
<!-- 1. 方式：改变引用 -->
<!-- 2. 通过set方式向对象注入数据
Vue.set(vm.userInfo, 'address', 'beijing');
-->
<!-- 3. set实例方法：
vm.$set(vm.userInfo, 'address', 'beijing')
-->
<div v-for="(item,key,index) of userInfo">
{{item}} -- {{key}} -- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
lists : [
{
id : '001112222',
text : 'hello'
},{
id : '001112223',
text : 'world'
},{
id : '001112224',
text : 'fujingwen'
}
],
userInfo : {
name : "fjw",
age : 20,
sex : "female"
}
}
})
</script>
</body>
</html>
