(二)Vue.js 条件判断 20170818

本文主要是介绍(二)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>