Vue v-else-if 指令

Vue v-else-if 指令教程

Vue v-else-if 指令为 Vue v-if 添加一个 else-if 块。Vue v-else-if 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。

案列

Vue v-if v-else-if

<!DOCTYPE html> <html> <head> <title>Vue v-else 指令</title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> </head> <style type="text/css"> </style> <body> <div id="app"> <p v-if="score >= 90">优秀</p> <p v-else-if="score >= 80">良好</p> <p v-else-if="score >= 60">及格</p> <p v-else>不及格</p> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el :'#app', data:{ score:70 } }) </script> </html>

浏览器运行效果如下图所示:

45 vue velseif.png

因为 score 值大于 60 且小于 80,所以执行了 Vue v-else-if,因此浏览器显示了 及格。

Vue v-else-if指令总结

Vue v-else-if 指令为 Vue v-if 添加一个 else-if 块。Vue v-else-if 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。