vue入门总结第二弹——列表渲染v-for和条件渲染v-if以及v-show

v-for列表渲染

迭代普通数组

用这个指令基于一个数组来渲染一个列表，使用方法：v-for=“item in items”，其中items时源数据数组，item时被迭代的数组元素别名。
v-for
用法：
v-for在遍历对象身上的键值对的时候，一共有三个参数，val，key，以及index。其中，val是值，key是键，index是索引，索引从零开始，键是根据键名称出现。

<ul id="ex1">
	<li v-for="item in items" :key="item.message">
			{
  {item.message}}
	</li>
</ul>
<script>
	var ex1=new Vue({
    
		el:'#ex1',
		data:{
    
			items:[
				{
    message:'A'},
				{
    message:'b'}
			]
		}
	})
	//输出结果为:
	//·A
	//·b
</script>

可以访问所有父作用域的property，第二个参数为当前项的索引值。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {
  { parentMessage }} - {
  { index }} - {
  { item.message }}
  </li>
</ul>
<script>