首先vue.js请注意2.1.0版本以上方可使用v-else-if

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script src=' http :/vue。js '/脚本/头体div id=' box '！-实例1 vue 2.1.0以上版本支持v-if v-else-if-div v-if=' type=' A ' ' A/div v-else-if=' type=' B ' ' B/div v-else-if=' type=' C ' ' C/div v v-else Not A/B/C/div HR/！-实例2v-if/v-else-div v-if=' type==' A ' '好的！/div div v-elseno！/div hr /！-实例3模板中使用v-if/v-else-my-form :登录类型=' loginType '/my-form按钮@ click=' toggleFun '切换登录类型/按钮/div脚本var my form={//template : ' # my form ' prop :[' loginType ']，template : ` div-if=' loginType=' username ' '标签username/label输入占位符='输入您的用户名key=' username-input '/div-else $ mount(' # box ')；data:{ type:'C '，loginType:'username' }，组件3360 { ' my-form ' : my form }，方法： { togglefun : fun(){ this。logintype=this。logintype===' username '？'电子邮件":"用户名；} }，创建d :函数(){ } })；/脚本/正文/html页面展示如下：

vue.js下载：https://github.com/vuejs/vue

以上这篇对vue v-if v-else-if v-else的简单使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。