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