vue学习 八 v-if和v-for的使用

个人理解：

v-if：正如if一样，就是判断为真为假，然后看情况输出相应结果；

v-else：跟在v-if后面，如果什么不成立，就运行else后面的命令；

v-else-if：就像选择一样，如果一个变量等于A，执行A下面的命令，如果等于B，则执行B下面的命令；

v-show:  和v-if的结果是一样的，用法也一样

<h1 v-show="error">Hello!</h1>

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

 template元素的使用：

就像一个标签一样，用来加上v-if什么的，然后页面里不会显示出这个东西，就如上图中圈出来的地方一样，只会显示出其中的内容，使用方法如下；

<template v-if="bianliang">

         <h1>Title</h1>

        <p>Paragraph 1</p>

        <p>Paragraph 2</p>

</template> 

 v-for的使用：  就是用来循环输出数组的元素的

        <!-- 用数组下标显示数组元素 -->
         <div>   
		    {{country[0]}}
		 	{{country[1]}}
		 	{{country[2]}}
		</div>
		 <!--遍历数组-->
		 <ul>
		 	<li v-for="countrys in country">
		 		{{countrys}}
		 	</li>
		 </ul>
		 	
		<ul>
		 	<li v-for="(user,index) in users">
		 		{{index+1}} .. {{user.name}}----{{user.age}}
		 	</li>
		 </ul>


data: {   //用于数据的存储
				  	
	error:false,
	success:true,
				  	
	 country:["shanghai","guangdong","gnazhou"],
			users:[
				  {name:"zhangsan",age:20},
				  {name:"lisi",age:21},
				  {name:"liusongjing",age:22}
				]
		 },

 v-for=“（user，index） in users”   

users表示的是数组  user表示的一个代号而已，可以是任意，index是为了显示数组下标从0开始