vue中的v-if方法详解-- 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> ，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

在字符串模板中，比如 Handlebars，我们得像这样写一个条件块：


<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}
在 Vue 中，我们使用 v-if 指令实现同样的功能：
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一个“else 块”：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

案例


<!DOCTYPE html> 
<html> 
<head>     
    <meta charset="UTF-8">     
    <title></title>     
    <script type="text/javascript"  src="vue.js"></script> 
</head> 
<body>     
<div id="id">         
    <span v-if="flag">            
        如果flag为true则显示,false不显示!         
    </span>     
</div> 
</body> 
<script>     
var vm = new Vue({         
    el:"#id",         
    data:{            
         flag:true         
     }     
}) 
</script> 
</html>

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