上代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue6</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

     <script src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <!--v-if指令-->

     <p v-if="seen>100">you can see me</p>

     <p v-else-if="seen>50">or you can see me</p>

     <p v-else-if="seen>10">you may see me</p>

     <p v-else>well, you can only see me</p>

     <!--注意：v-else、v-else-if必须跟在v-if或v-else-if后面-->

     <!--vue会尽可能高速的渲染元素，通常是复用已有元素-->

     <!--下面代码中切换loginType不会清除已输入的内容，因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder-->

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

         <label for="um">username</label>

         <input type="text" placeholder="enter username" id="um">

     </template>

     <template v-else>

         <label for="email">email</label>

         <input type="text" placeholder="enter email" id="email">

     </template>

     <button @click="ToggleLoginType">toggle login type</button>

     <br>

     <!--如果想表达“这两个元素是独立的，不要复用它们”，那么使用key-->

     <!--这样每次切换时，输入框都会被重新渲染-->

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

         <label for="um1">username</label>

         <input type="text" placeholder="enter username" id="um1" key="username">

     </template>

     <template v-else>

         <label for="email1">email</label>

         <input type="text" placeholder="enter email" id="email1" key="email">

     </template>

     <!--注意label仍然被高效复用，因为它没有唯一值key-->

     <!--v-show使用-->

     <p v-show="shown">this will be shown</p>

     <!--v-show不支持template元素，也不支持v-else-->

 </div>

 <script>

     new Vue({

         el: '#app',

         data:{

             seen: 11,

             loginType: 'username',

             shown: true

         },

         methods:{

             ToggleLoginType:function(){

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

                     this.loginType ='email';

                 }else{

                     this.loginType='username';

                 }

             }

         }

     })

 </script>

 </body>

 </html>

运行结果：

 这里再补充两点：

1.html中的<template>元素是一种保存客户端内容的机制，该内容在页面加载时不被渲染，但是运行时可以使用js实例化。

2.v-if与v-show的区别：

v-show只是简单的切换css属性display,元素始终被渲染被保存在DOM中；

v-show的切换开销相比v-if小，但是初始渲染开销比v-if大；

因此频繁切换，使用v-show；运行后很少改变，使用v-if。

参考：MDN <template>，https://cn.vuejs.org/v2/guide/conditional.html

Vue学习5：条件渲染的更多相关文章

  1. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

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

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

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

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

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

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

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

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

  6. Vue指令之条件渲染

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

  7. Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）

    文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...

  8. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  9. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  10. Vue学习（四）：条件渲染

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

随机推荐

  1. 【安全性测试】Android测试中的一点小发现

    在执行某个项目中的APP测试发现的两个问题,自然也是提供参考,作为经验记录下来. 一.通过apk的xml文件获取到某项目APP的账号和密码 使用eclipsel或者drozer,获得apk的xml文件 ...

  2. Buffer --缓冲器

    一. 启动Buffer缓冲器 node 输入 buffer 创建一个新的buffer var buf = new buffer(''hello word) 查看buf的长度 buf.length 运行 ...

  3. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

  4. larave异步多图片上传的实现和注意事项及$file的对象函数

    要使用多图片上传,首先要在input添加multipart,同时注意name的参数要加[],不然,不算是数组.具体如下,注意绿色地方.如果是单张图片,把[]去掉,不要multiple; <inp ...

  5. 剑指offer——python【第23题】二叉搜索树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 解题思路 首先要清楚,这道题不是让你去判断一个给定 ...

  6. css3 属性

    1.css 面试题: css 组成: css 样式组成 规则:选择器+声明块 声明块:css属性+css属性值 2.css 解析规则: 从右往左 3.文字超出省略号显示: 1.元素不是内联块 2.ov ...

  7. 问题：CGI返回给前端的汉字数据是乱码（已解决）

    今天,我在写CGI程序,把后台数据返回到前台页面上,出现乱码, 不好看,所以,我在Content-type:application后面加了字符集的设置(字符集和前端一样), fprintf(stdou ...

  8. keepalived + nginx 实现双机热备

    # docker run -itd --name centos_m1 centos # 进入容器 # docker exec -it centos_m1 /bin/bash # 安装nginx # r ...

  9. iOS代码组件化--利用cocoaPods创建私有库

    如果项目模块多,模块间逻辑复杂,我们发现多个人同时维护一个代码仓库需要十分小心,一不小心,造成冲突,解决起来很烦,相信很多人都遇到手工删除合并的冲突的文件的经历. 如果利用组件化思想,每个人维护自己的 ...

  10. 2019OO第二单元总结

    (1)设计策略 电梯第1次作业是一个傻瓜调度电梯,使用先来先服务原则,不用考虑捎带(可以认为电梯的载客量为1),因此比较简单,调度器用一个队列就可以. 使用生产者-消费者模型,输入线程是生产者,电梯是 ...