(二)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>