Vue条件判断与列表渲染

2.1、条件判断

下面来介绍v-if 、v-else、 v-else-if、v-show 、v-else-if、v-show指令

1.在v-if中如果要对多组元素进行包装，可以使用<template>将其包装起来，在调用完了之后不会显示出来。

2.这里的v-if和v-else是可以连着用的，如果if的成立就调用if中的值，不然就是调用else中的函数传参。

    <p v-if="(year%4==0 && year%100!=0) || year%400==0">
        { {show(29)}}
    </p>
    <p v-else>
        { {show(28)}}
    </p>

<div id="box">
	<p v-if="(year%4==0 && year%100!=0) || year%400==0">
		{
  {show(29)}}
	</p>
	<p v-else>
		{
  {show(28)}}
	</p>
	<template v-if="show2">
		<input type="radio" value="A">A
		<input type="radio" value="B">B
		<input type="radio" value="C">C
		<input type="radio" value="D">D
	</template>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			year : 2019,
			show2 : true
		},
		methods : {
			show : function(days){
				alert(this.year+'年2月份有'+days+'天');//弹出对话框
			}
		}
    });
</script>

3.这里是v-else-if的使用方法：

<div id="box">
	<div v-if="score>=90">
		刘星的考试成绩优秀
	</div>
	<div v-else-if="score>=75">
		刘星的考试成绩良好
	</div>
	<div v-else-if="score>=60">
		刘星的考试成绩及格
	</div>
	<div v-else>
		刘星的考试成绩不及格
	</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			score : 85
		}
    });
</script>

4.这里介绍v-show，在这里 v-show的时候是把元素先放到DOM中，之后只是简单的改变元素的CSS样式

相比较于v-if这个v-show如果用在多次频繁的调用的时候的场景的时候是很高效的。

 这里的例子是进行显示的变换，点击显示，再点就不显示

<div id="box">
	<input type="button" :value="bText" v-on:click="toggle">
	<div v-show="show">
		<img src="face.png">
	</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			bText : '隐藏图片',
			show : true
		},
		methods : {
			toggle : function(){
				//切换按钮文字
				this.bText == '隐藏图片' ? this.bText = '显示图片' : this.bText = '隐藏图片';
				this.show = !this.show;//修改属性值
			}
		}
    });
</script>

2.2列表渲染

1. v-for

v-for可以进行数据的重复渲染元素，使得一个的栏目只要有规律等就可以直接写一个传参就行。

(tourist,index) in touristlist这里的用法还可以这样用，即取出值，又取出索引值。

<style>
body{
font-family:微软雅黑}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:510px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title div{
text-align:center;