(二)Vue.js 条件判断 20170818

条件判断

（一）v-if  使用

   概念：v-if  其实说白了就是类似于java里面的判断语句，在vue.js中经常跟 template一起使用

 1.jsp 代码

<template v-if="false">
	<label>符亮星</label><br/>
	<label>职业爱好：编码制造方便</label>
</template>

设置为false时就会隐藏掉

结果图

                                          

2、设置为true时，会显示html

<template v-if="true">
	<label>符亮星</label><br/>
	<label>职业爱好：编码制造方便</label>
</template>

结果图

3、注意，v-if 写法注意事项

new Vue({
	el : '#vueId',
	data : {
		name : '',
		gent : true,
		vON:'',
		href:'www.baidu.com',
		val:'OK'
		},
		//触发监听事件
		methods:{
			eventClick : function(){
			alert("触发");
			this.vON = 'v-on触发事件';
			}
		}
	});

JSP页面错误写法【导致页面报错】

<template v-if="{{val=='OK'}}">
	<label>符亮星</label><br/>
	<label>职业爱好：编码制造方便</label>
</template>

JSP正确写法是【把大括号去掉】

<template v-if="val=='OK'">
	<label>符亮星</label><br/>
	<label>职业爱好：编码制造方便</label>
</template>

(二)v-if    v-else  的使用

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

(三) v-else-if

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>