vue的条件渲染和列表渲染介绍

		<div v-if="seen">hahahah</div>

		<!-- v-if插入或者删除元素的指令 -->

		<div v-if="seen">123</div>

		<div v-else>456</div>

		<!-- v-if,v-else语句 -->

		<div v-if="gread>90">success</div>

		<div v-else-if="gread>60">ok</div>

		<div v-else>failed</div>

		<!-- v-if,v-else-if,v-else语句 -->

		<template v-if="seen">

			<div>ni</div>

			<div>hao</div>

			<div>cuihaoran</div>

		</template>

		<template v-else>

			<div>ni</div>

			<div>hao</div>

			<div>zhouyongbo</div>

		</template>

		<!-- template语法结合v-if语句，同时可以控制多条html语句，template不会被渲染我html元素，仅仅用来包装多个元 -->

		<template v-if="logintype === 'username'">

			<label>username:</label>

			<input type="text" placeholder="用户名">

		</template>

		<template v-else>

			<label>passwd:</label>

			<input type="text" placeholder="密码">

		</template>

		<button v-on:click = "clickFunc">切换</button>

		<!-- 因为插入和删除元素是非常耗时的，所以如果有上面的例子，我们2个template标签中的input标签完全一样，所有当我们在username中输入一个用户名，然后点击切换后，passwd的输入框还是会有我们之前输入的信息，vue是复用之前的元素，不会 -->

		<!-- 做新的增加和删除的操作 -->

		<template v-if="logintype === 'username'">

			<label>username:</label>

			<input type="text" placeholder="用户名" key="username">

		</template>

		<template v-else>

			<label>passwd:</label>

			<input type="text" placeholder="密码" key="email">

		</template>

		<button v-on:click = "clickFunc">切换</button>

		<!-- 如果我们不想复用，你就给重新创建和删除元素，那么vue提供了一个key的变量，我们可以用这个告诉vue，不要复用，重新给我创建和生成元素 -->

		<div v-show="seen">v-show</div>

		<!-- v-show是控制元素是否显示的语句，不管v-show是否为真，这个元素都存在，如果为false，则display为true而已，元素还在dom中 -->

		<!-- 不支持tempalte和v-else语句 -->

	<!-- v-if和v-show在一起使用 -->

	<ul>

		<li v-for="item in items" v-if="item.isok">{{item.text}}</li>

	</ul>

	<ul>

		<li v-for="item in items">{{item.text}}</li>

	</ul>

	<ul>

		<li v-for="(item,index) in items">{{item.text}},{{index}}</li>

	</ul>

	<!-- item是列表中的元素，index是索引，这个顺序不能变，从0开始 -->

	<ul>

		<li v-for="(item,index) of items">{{item.text}},{{index}}</li>

	</ul>

	<!-- 这个例子和上面的例子效果是一样的，in可以替换为of -->

	<div>

		<ol>

			<li v-for="obj in pipi">{{obj}}</li>

		</ol>

	</div>

	<div>

		<ol>

			<li v-for="(obj,value) in pipi">{{obj}}:{{value}}</li>

		</ol>

	</div>

	<div>

		<ol>

			<li v-for="(obj,value,index) in pipi">{{obj}}:{{value}}:{{index}}</li>

		</ol>

	</div>

	<todu v-for="item in items" v-bind:name="item.text"></todu>

	<div>

		<span v-for="n in 9">{{n}},</span>

	</div>

	<div v-for="n in 10">

		<template>

			<label>username:</label>>

			<input type="text" placeholder="username">

		</template>>

	</div>