for循环数组、对象数组
<div id="app">
<!-- v-for循环数组,(item值每一项) -->
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
<ul>
<!-- i 是索引 -->
<li v-for="(item,i) in list">{{ item + '=======' + i}}</li>
</ul>
<!-- 当list是数字的时候,就是从1循环到这个数 -->
<p v-for="num in 10">{{ num }}</p>
<!-- v-for 循环对象数组 -->
<ul>
<li v-for="item in list2">{{item.id + '-------' + item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list2">{{item.id}} ------ {{item.name}} ----- {{i}}</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
list: ['秦始皇', '汉武帝', '唐太宗', '宋太祖'],
list2:[
{id: 1, name: '秦始皇'},
{id: 2, name: '汉武帝'},
{id: 3, name: '唐太宗'},
{id: 4, name: '宋太祖'}
]
},
methods: {}
})
for循环对象
<div id="app">
<ul>
<!-- item 代表的是值 -->
<li v-for="item in person">{{ item }}</li>
</ul>
<ul>
<!-- key 代表键, i 是索引 -->
<li v-for="(val, key, i) in person">{{ val }} ------ {{ key }} ----- {{ i }}</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
person: {
id: 1,
name: '张三',
age: 20,
sex: '男'
}
},
methods: {}
})
for循环中:key属性的使用
<div id="app">
<label>
Id:<input type="text" v-model="id" />
</label>
<label>
Name:<input type="text" v-model="name" />
</label>
<button type="button" @click="add">添加</button>
<ul>
<!-- :key 指定的值必须具有唯一性(这个标识符代表的内容不能重复) 属性只能是字符串或者数字 -->
<!-- 涉及到v-for循环,最好给循环的每一项添加:key属性 -->
<li v-for="item in list" :key="item.id">
<input type="checkbox" />
{{item.id}} ------- {{item.name}}
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list:[
{id: 1, name: '秦始皇'},
{id: 2, name: '汉武帝'},
{id: 3, name: '唐太宗'},
{id: 4, name: '宋太祖'},
]
},
methods: {
add(){
var newObj = {id: this.id, name: this.name};
// console.log(this.id);
// this.list.push(newObj);
this.list.unshift(newObj);
}
}
})