1、简单的v-if指令，代码如下

<!DOCTYPE html>

<html>

<head lang="en">

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

在控制台可以改变flag的值。

2、v-else

 <!DOCTYPE html>

 <html>

 <head lang="en">

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

3、v-else-if

 <!DOCTYPE html>

 <html>

 <head lang="en">

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

输出结果:

4、用key管理可复用元素

先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处，那就是在切换input时不会清楚里面的数据。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <span v-if="loginType === 'username'">

         <label>Username</label>

         <input placeholder="Enter your username" >

     </span>

     <span v-else>

         <label>Email</label>

         <input placeholder="Enter your email address" >

     </span>

     <button v-on:click="test">切换</button>

 </div>

 </body>

     <script>

     var vm = new Vue({

         el:"#app",

         data:{

             loginType: 'username'

          },

         methods:{

             test:function(){

                 if(this.loginType != 'username'){

                     return this.loginType = 'username'

                 }

                 return this.loginType = 'email'

             }

         }

     })

 </script>

 </html>

我么再看看使用key管理可复用元素。添加key属性，则这两个元素是相互独立，不再复用。这样当我们在切换input时里面的数据会被清除。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript"  src="vue.js"></script>

</head>

<body>

<div id="app">

    <span v-if="loginType === 'username'">

        <label>Username</label>

        <input placeholder="Enter your username" key="username-input">

    </span>

    <span v-else>

        <label>Email</label>

        <input placeholder="Enter your email address" key="email-input">

    </span>

    <button v-on:click="test">切换</button>

</div>

</body>

    <script>

    var vm = new Vue({

        el:"#app",

        data:{

            loginType: 'username'

         },

        methods:{

            test:function(){

                if(this.loginType != 'username'){

                    return this.loginType = 'username'

                }

                return this.loginType = 'email'

            }

        }

    })

</script>

</html>

5、v-show  & v-if

　　v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

　　v-show 不支持 <template> 语法，也不支持 v-else。

　　两者之间的区别：

　　v-if :1.是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　　　 2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做

　　　　 3.有很高的切换开销，适用于条件不太容易改变的时候

　　v-show:1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换

　　　　　   2.有很高的初始渲染开销，适用于非常频繁地切换

v-show的代码示例如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

    <div v-show="flag">

        you can see me

    </div>

 </div>

 </body>

     <script>

     var vm = new Vue({

         el:"#app",

         data:{

             flag: true

          }

     })

 </script>

 </html>

6、v-if 和v-for 混合使用示例

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

    <div v-for="message in messageList" v-if="message.test == 'vue.js'">

       {{message.test}}

    </div>

     <br>------------完美的分隔线--------------</br>

     <div v-for="message in messageList">

         <span v-if="message.test == 'vue.js'">{{message.test}}是一种很好用的前台框架</span>

         {{message.test}}

     </div>

 </div>

 </body>

     <script>

     var vm = new Vue({

         el:"#app",

         data:{

             messageList: [

                 {test:'java'},

                 {test:'vue.js'},

                 {test:'liunx'}

             ]

          }

     })

 </script>

 </html>

输出结果：

Vue v-if条件渲染的更多相关文章

  1. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  2. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. Vue 基础自查——条件渲染和列表渲染

    v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...

  4. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...

  5. Vue指令之条件渲染

    1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...

  6. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  7. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  8. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  9. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  10. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

随机推荐

  1. csu1326(The contest)

    题目链接:传送门 题目思路:并查集加分组背包 #include <iostream> #include <cstdio> #include <cstdlib> #i ...

  2. 基于java mail实现简单的QQ邮箱发送邮件

    刚学习到java邮件相关的知识,先写下这篇博客,方便以后翻阅学习. -----------------------------第一步 开启SMTP服务 在 QQ 邮箱里的 设置->账户里开启 S ...

  3. D3D9和OpenGL加载纹理图片的API是哪个？

    D3D9 创建一个空纹理,当返回 S_OK 且 ppTexture 纹理对象指针不为 NULL 时,则表示该函数调用成功. HRESULT D3DXCreateTexture( _In_  LPDIR ...

  4. Python3.6全栈开发实例[023]

    23.税务部门征收所得税. 规定如下: (1)收入在2000以下的. 免征. (2)收入在2000-4000的, 超过2000部分要征收3%的税. (3)收入在4000-6000的, 超过4000部分 ...

  5. Hadoop “Name node is in safe mode” 错误解决方法

    Hadoop 解除 "Name node is in safe mode" 运行hadoop程序时,有时候会报以下错误:org.apache.hadoop.dfs.SafeMode ...

  6. Centos6.3下Ganglia3.6.0安装配置

    近期安装Ganglia.因为之前Linux基础基本为0.因此费了非常大的周折.最后在失败了好多次之后最终看到了梦寐以求的web界面.以下总结下这几天来的工作. ganglia是一个监控软件,他包括三部 ...

  7. 《Tensorflow技术解析与实战》第四章

    Tensorflow基础知识 Tensorflow设计理念 (1)将图的定义和图的运行完全分开,因此Tensorflow被认为是一个"符合主义"的库 (2)Tensorflow中涉 ...

  8. 解读mysql主从配置及其原理分析(Master-Slave)

    在windows下配置的,后面会在Linux下配置进行测试,需要配置mysql数据库同步的朋友可以参考下. 1.在主数据库服务器为从服务器添加一个拥有权限访问主库的用户:GRANT REPLICATI ...

  9. Commit 函数WAIT = 'X'.

    BAPI_TRANSACTION_COMMIT IF WAIT EQ SPACE. COMMIT WORK. ELSE. COMMIT WORK AND WAIT. IF SY-SUBRC NE . ...

  10. 20170524 委外采购的物料BOM

    目标:找委外采购订单BOM, 我的方法:1.直接在电脑中搜索关键字:2.到系统中找数据查询3.委外采购订单系统如何操作? 数据怎么做, 实施: 结果:MDBAEKET, "采购订单项目计划行 ...