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. C++使用RabbitMQ类库做客户端与RabbitMQ Server通讯,生成C++可调用的rabbimq.*.dll的过程

    Step: download the latest rabbitmq-c via: https://github.com/alanxz/rabbitmq-c follow the document, ...

  2. Entity Framework Code-First(9.1):DataAnnotations - Key Attribute

    DataAnnotations - Key Attribute: Key attribute can be applied to properties of a class. Default Code ...

  3. Razor中的 内容标记块语法

    在C#中,有两种方法来进行内容块标记 第一种方式 用@: 来标识 @if (true) { @: 测试内容标记块 @DateTime.Now.ToString() } <hr /> 第2种 ...

  4. 3. Shodan新手入坑指南

    什么是 Shodan? 首先,Shodan 是一个搜索引擎,但它与 Google 这种搜索网址的搜索引擎不同,Shodan 是用来搜索网络空间中在线设备的,你可以通过 Shodan 搜索指定的设备,或 ...

  5. Python开发【第二篇】: 基本数据类型(一)

    1. 整型   整型即整数,用 int 表示,在 Python3 中整型没有长度限制. 1.1 内置函数   1. int(num, base=None)   int( ) 函数用于将字符串转换为整型 ...

  6. webconfig连接数据库配置

    <connectionStrings> <add name="sqlConnection" connectionString="server=----- ...

  7. ASP.NET MVC 小牛之旅3:Routing——网址路由

    网址路由(Routing)在ASP.NET MVC中有两个主要用途,一个用途是匹配通过浏览器传来的HTTP请求,另一个用途则是响应适当的网址给浏览器. 3.1匹配通过浏览器传来的HTTP请求 首先我们 ...

  8. cf837E(xjb)

    题目链接:http://codeforces.com/problemset/problem/837/E 题意:f(a, 0) = 0 ,     f(a, b) = 1 + f(a, b - gcd( ...

  9. burpsuite 抓HTTPS数据包

    抓HTTPS数据包 导出保存为cer证书文件,导入到受信任的根证书颁发机构 设置代理服务器与burp中proxy listeners保持一致 设置目标url 抓包 可用repeater发请求

  10. spring cloud微服务三:Eureka服务治理之注册服务提供者及服务的发现和消费

    当服务注册中心成功建立以后,就需要有服务的注册和消费,否则这个服务注册中心就没有了存在的意义,而实际上,一个简单的服务注册也是非常简单的,仅仅需要实现四部曲就好. 首先,还是建立一个基本的spring ...