v-if&v-show&v-for小知识点

v-if

v-if 是一个指令,必须要在元素上使用;
如果想一次渲染多个元素,需要使用vue的<template>元素,最终渲染结果不包含template;
	eg:<template v-if='ok'>
		<h1>你好</h1>
		<p>你好吗</p>
		<p>我很好</p>
	</template>

注意!!!v-else 必须跟在v-if,或者v-else-if后面 ,中间不能有其他标签,要不然会打断;

注意!!! v-if 也可以添加key ;

v-show

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-for

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>//*双重for循环中,可以嵌套一个方法,利用实参来传递*
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}