vue之条件和列表渲染

极大的解放双手，如果你有用过纯粹的JS去写数据列表渲染（你可能会说，也不是特别麻烦啊），但是一定没有这么简单明了，更甚至容易懂，这也是为什么说Vue相对更加简单，它以屏蔽底层复杂的逻辑实现，以抽离通用，一旦抽离意味着简单化。如果你写过react一定会直呼内行，vue封装的完整性。

v-for && v-if

v-for 循环数组或者对象，这其实不用说太多，注意一些细节，key值的榜单，尽量不是index

<!-- 
1. 推荐遍历对象用in，遍历数组用of
2. (item, index) in items || item in items 两者都可，但是对于数组index是下标, 对象pro是属性名
3. key绑定不要是index，注意数组的时候，所以一般是个嵌套的对象
4. 没有外套的循环或者条件判断 template => 但是注意，这个template不能是最外层，必须有最外层元素
5. v-for和v-if使用是v-for优先级高
6. 两个指令不限于普通元素，可用于组件
-->
<div v-for="(item, pro) in items" :key="item.id"></div> 
<div v-for="(el, index) of arrs" :key="item.id"></div>

实践操作

var vm = new Vue({
  el: '#app',
  name: 'App',
  data: function(){
  	return {
  		itemArrs: [
	  		{id: 1, name: 'zix1'},
	  		{id: 2, name: 'zix2'} ,
	  		{id: 3, name: 'zix3'} ,
	  		{id: 4, name: 'zix4'} 
		]
  	}
  },
  template: `
  <div id="app">
    这是app组件
	<div v-for="(item, index) of itemArrs" :key="item.id">
		<!-- 对象的属性没有重复的 -->
		<div v-for="(value, pro) in item" :key="pro">{{value}}</div> 
	</div>
  </div>
  `
})

template不需要渲染父节点 div或其它元素

{
	template: `
  	<div id="app">
      这是app组件
	  <div v-for="(item, index) of itemArrs" :key="item.id">
		<!-- 对象的属性没有重复的 -->
		<template v-for="(value, pro) in item" :key="pro">
			{{value}}
		</template>
	  </div>
    </div>
    `
}

附录

要学习Vue事件机制的可以点击这里哦Vue事件处理