Vue.js（2.x）之条件渲染
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）之条件渲染的更多相关文章
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- Vue.js 系列教程 1：渲染，指令，事件
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- Vue知识整理10：条件渲染（v-if v-show）
在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.
- Vue对Html标签应用条件渲染
我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js 系列教程 ①
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- Angular和Vue.js 深度对比
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...
随机推荐
- 实现Unity对Dictionary的序列化
若有尝试过想在unity的inspector检视面板中像List或者数组那样可以编辑Dictionary变量的童鞋应该知道,Dictionary变量不会出现在inspector中,unity并不会直接 ...
- Linux 启动顺序
Linux 启动顺序:1. BIOS自检2. 运行系统内核并检测硬件3. 运行系统的第一个进程init4. init读取系统引导配置文件/etc/inittab中的信息进行初始化 ...
- eigen3.3.3+opencv3.2跑orbslam3数据集出现usleep错误
cd ORB_SLAM2 chmod +x build.sh ./build.sh的时候出现错误:/home/zhao/ORB_SLAM2-master/src/System.cc:236:28: e ...
- win7 失去焦点解决方案
将HKEY_CURRENT_USER\Control Panel\Desktop中的ForegroundLockTimeout的选项,改成十进制的200000毫秒或者十六进制30d40. 参考链接: ...
- Django 之 auth 模块
Django 内置一个 auth 模块,帮助用户实现注册.登录.注销以及修改密码等功能,帮助开发者省去了很多功夫. auth 模块 在创建模型时,Django内部会生成一个名为 auth_user 的 ...
- 浅谈REST API
浅谈REST API 说明: 本文部分内容根据其它网络文章编写,如有版权问题请及时通知. 背景 发迹于互联网的REST,在国内国外混得可谓是风生水起,如今又进入电信行业的视野,连TMF都将其作为战略项 ...
- SCUT - 289 - 小O的数字 - 数位dp
https://scut.online/p/289 一个水到飞起的模板数位dp. #include<bits/stdc++.h> using namespace std; typedef ...
- loj #2325. 「清华集训 2017」小Y和恐怖的奴隶主
#2325. 「清华集训 2017」小Y和恐怖的奴隶主 内存限制:256 MiB时间限制:2000 ms标准输入输出 题目类型:传统评测方式:文本比较 题目描述 "A fight? Co ...
- 洛谷P3694 邦邦的大合唱站队／签到题
P3694 邦邦的大合唱站队/签到题 题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶 ...
- 验证控件jQuery Validation Engine调用外部函数验证
在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证.自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有 ...