vue中的v-else-if方法详解-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

类型：any
条件：前一兄弟元素必须有 v-if 或 v-else-if。
用法：
表示 v-if 的 “else if 块”。可以链式调用。


<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>

案例：


<!DOCTYPE html> 
<html> 
<head>     
    <meta charset="UTF-8">     
    <title></title>     
    <script type="text/javascript"  src="vue.js"></script> 
</head> 
<body> 
<div id="app">     
    {{message}}     
    <div v-if="message==='A'">         
        str = {{message}}     
    </div>     
    <div v-else-if="message==='B'">         
        str = {{message}}     
    </div>     
    <div v-else-if="message==='C'">         
        str = {{message}}     
    </div>     
    <div v-else>         
        str = null     
    </div> 
</div> 
</body>     
<script>     
var vm = new Vue({         
    el:"#app",         
    data:{             
        message: 'B'     
    }     
}) 
</script> 
</html>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的v-else-if方法详解