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


<div id="app">
    <!--template标签是vue提供的给我们的没有实际意义，用来包裹元素用的-->
    <!--v-show不支持template-->
    <!--<template v-if="true">-->
        <!--<div>1</div>-->
        <!--<div>21</div>-->
        <!--<div>3</div>-->
    <!--</template>-->
    <!--<div v-else>555</div>-->
    <button @click="cut=!cut">点击</button>
    <!--默认情况下切换dom的结构时会被复用，如果不需要复用 需要加key-->
    <template v-if="cut">
        <label>注册</label>
        <input type="text" key="1">
    </template>
    <template v-else>
        <label>登录</label>
        <input type="text" key="2">
    </template>
</div>


<script>
    let vm=new Vue ({
        el:"#app",
        data:{
            cut:true
        }
    })
</script>

用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template> ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。

可以使用 v-else 指令来表示 v-if 的“else 块”：


<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。


<!DOCTYPE html> 
<html> 
<head>     
    <meta charset="UTF-8">     
    <title></title>     
    <script type="text/javascript"  src="vue.js"></script> 
</head> 
<body> 
<div id="app">     
    <div v-if="Math.random() > 0.5">         
        Now you see me     
    </div>     
    <div v-else>         
        Now you don't     
    </div>     
    <div v-if="num==10">         
        num = {{num}}     
    </div>     
    <div v-else>         
        num != 10     
    </div> 
</div> 
</body>     
<script>     
    var vm = new Vue({         
        el:"#app",         
        data:{             
            num:10    
        }     
    }) 
</script> 
</html>

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