1.v-if：这里的官网文档看完后赶脚v-if就是用来判断元素是显示还是隐藏。

2.template这个包装元素感觉挺好用，以后把需要某些特定操作才出现的元素存放进去挺好。

3.前面看的网友写的还可以配合v-show来使用，结果运行后没效果。看来还是得老实看官网简介：

v-else-if与v-else使用大同小异，不截图了。

4.用 key 管理可复用的元素

没有代码测试是不完整的，再说疑问也多啊。是时候贴代码写测试结果了：

HTML代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>

<body>

<div id="app">

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

    <label>Username</label>

    <input placeholder="Enter your username">

  </template>

  <template v-else>

    <label>Email</label>

    <input placeholder="Enter your email address">

  </template>

</div>

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

<script>

   var vm = new Vue({

        el: '#app',

        data: {

           loginType: 'username'

        }

    })

</script>

</body>

</html>

1）当两个input添加了不同值的key属性后，loginType值发生改变时，新出现的input只会出现placeholder里的值，看来是重新渲染了。

2）只设置一个input有key属性后，新出现的input同样只是出现placeholder里的值，毕竟有key属性与没有key属性还是不同的。

3）当两个input的key属性都设置为空或值相同时，input不会被重新渲染，会保留已经输入的值。

4）label元素为什么会被复用，毕竟它们的text内容不同啊？

5.v-show指令的使用也相对简单，即使下图中OK值设定为0或者false或者不设置，在浏览器解析后的CSS属性display:none。

v-if与v-show的比较，这文档写的还好：

v-if与v-for在后面“列表渲染指南”时再细看。

Vue.js（2.x）之条件渲染的更多相关文章

  1. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  2. Vue.js 系列教程 1：渲染，指令，事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  3. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  4. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  5. Vue知识整理10：条件渲染（v-if v-show）

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  6. Vue对Html标签应用条件渲染

    我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签 ...

  7. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  8. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  9. Vue.js 系列教程 ①

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  10. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

随机推荐

  1. hadoop2.6.0完全分布式部署

    这里是hadoop最小的配置,也就是修改最少量的东西让hadoop跑起来. 系统是 Centos6.7 64位, hadoop是2.6.0,虚拟机是VMWare WorkStation 假设虚拟机启动 ...

  2. storm操作zookeeper源码分析-cluster.clj

    storm操作zookeeper的主要函数都定义在命名空间backtype.storm.cluster中(即cluster.clj文件中).backtype.storm.cluster定义了两个重要p ...

  3. java之Scanner

    参考http://how2j.cn/k/operator/operator-scanner/658.html#nowhere 需要用到从控制台输入数据,所以需要用到Scanner类 使用Scanner ...

  4. 6.【应急响应】Linux入侵排查思路

    0x01 入侵排查思路 一.账号安全 基本使用: 1.用户信息文件/etc/passwd root:x:0:0:root:/root:/bin/bash account:password:UID:GI ...

  5. [亂數] <細說> C/C++ 亂數基本使用與常見問題

    陸陸續續寫了 EA  一.二年,以前亂數引導文回頭看時才發現,怎麼有這麼多細節的錯誤.沒系統. 這篇文章主要引導初學者使用亂數,同時附上常被翻出來討論的議題,C/C++適用,唯以 C 語言撰之. 也由 ...

  6. AndroidMainfest.xml文件解释

    AndroidManifest.xml是每个android程序中必须的文件.它位于application的根目录,描述了package中的全局数据,包括了package中暴露的组件(activitie ...

  7. EasyUI知识点汇总

    combobox联动设置 $(document).ready(function() { $('#gdfsdl1').combobox({ onSelect: function(record){ $(' ...

  8. DMZ主机

    DMZ称为"隔离区",也称"非军事化区".为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安全系统与安全系统之间的缓冲区.这个缓冲区位于 ...

  9. OC 中的 weak 属性是怎么实现的？

    OC 中的 weak 属性是怎么实现的,为什么在对象释放后会自动变成 nil?本文对这个问题进行了一点探讨.环境 mac OS Sierra 10.12.4 objc709参考答案 搜索后发现runt ...

  10. POJ1010 Stamps

    题目来源:http://poj.org/problem?id=1010 题目大意: 某邮局要设计新的邮资管理软件,依据顾客的需要和现有的面值给顾客分派邮票. 该邮局有很多顾客是集邮爱好者.这些人希望得 ...