4.2.2　v-else-if和v-else

v-else-if指令与v-if指令一起使用，与JavaScript中的if…else if类似。

下面示例使用v-else-if、v-else和v-if指令来模拟销售奖金的发放过程。

【例4.11】v-else-if、v-else与v-if指令（源代码\ch04\4.11.html）。

    <div id="app">
        <span v-if="sales>1000000">本季度的奖金为5万元！</span>
        <span v-else-if="sales >300000">本季度的奖金为3万元！</span>
        <span v-else-if="sales >100000">本季度的奖金为1万元！</span>
        <span v-else> 本季度没有奖金！</span>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                 sales:280000
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，按F12键打开控制台，并切换到“Elements”选项，结果如图4-14所示。

在上面示例中，当满足其中一个条件后，程序就不会再往下执行。使用v-else-if和v-else指令时，它们要紧跟在v-if或者v-else-if指令之后。 u4il6fO3w/306Mw5i0DWAGy2TMXpHGqXPlrFM2/vcbqKgdO1GXwF7T08qU3sBAFH