vue学习之template标签
HTML5提供的新标签，具有以下特性：
1、该元素天生display:none，同时模板元素内部内容也是隐藏的
2、位置任意，可以在<head>中，也可以在<body>或者<frameset>中。
3、获取template.childNodes是空，想获取里面的伪子元素，使用template.content，会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API。如：
var image_first = template.content.querySelector("img");
如果想切换多个元素，此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<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>
参考文章：
vue学习之template标签的更多相关文章
- Vue中的template标签的使用和在template标签上使用v-for
我们知道 .vue 文件的基本结构是: <template> ........ </template> <script> export default { nam ...
- Vue学习笔记 template methods,filters,ChromeDriver,安装sass
ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...
- *.vue文件的template标签内使用form标签
由于form表单有重复提交的问题,所以在vue文件内直接使用form标签时需要注意这个问题,否则会导致页面重复刷新跳转不成功的问题 解决方案: <form @submit.prevent> ...
- Vue中在template标签中进行判断时注意比较元素
(一)比较的元素,一个是data元素,另外一个是常量,如下图所示: 编译正常,运行正常,效果在期望中,会显示Hello World,结果如下: (二)比较的元素,一个是data元素,另外一个是cons ...
- vue template标签
在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- vue学习笔记（六） ----- vue组件
一.模块化与组件化 模块化的定义 模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习之路---No.7（分享心得，欢迎批评指正）
老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...
随机推荐
- （转）source insight的使用方法逆天整理
转载自:https://www.cnblogs.com/xunbu7/p/7067427.html A. why SI: 为什么要用Source Insight呢?因为她比完整的IDE要更快啊,比一般 ...
- 第四篇 - 爬取前程无忧python相关工作
环境:python3 pycharm 模块:requests,xlwt,urllib.request,re 正常三步走: 1.获取源代码 2.匹配源代码,获得目标数据 3.存储到文件中 直接上代 ...
- 文献笔记：Genome-wide associations for birth weight and correlations with adult disease
该文献纳入了EGG(Early Growth Genetics Consortium)和UK biobank两大数据库,分为欧洲祖先和非欧洲祖先群体.这两个数据用到的样本量分别如下: Early Gr ...
- Linux批量修改（删除）文件名某些字符(rename命令)
假设在路径C:/下存在多个类似以下的文件名 file_nall_abc1.txt file_nall_abc2.txt file_nall_abc3.txt file_nall_abc4.txt fi ...
- ActiveMQ与RabbitMQ的区别
1. ActiveMQ/ApolloMQ 优点:老牌的消息队列,使用Java语言编写.对JMS支持最好,采用多线程并发,资源消耗比较大.如果你的主语言是Java,可以重点考虑. 缺点:由于历史悠久,历 ...
- IO以及file的一些基本方法
IO定义:将内存的数据 持久化到设备上 这个动作称为输出 写 Output操作 把硬盘上的数据读取到内存 这个动作称为输入 读 Input 把上面这两种操作称为IO操作 File类的静态成员变量:pa ...
- python中执行shell命令的几个方法小结
原文 http://www.jb51.net/article/55327.htm 最近有个需求就是页面上执行shell命令,第一想到的就是os.system, os.system('cat /proc ...
- OS + CentOS 7 / firefox
s 一.安装firefox二.缺少so依赖如下步骤操作 1.缺少so依赖:下载firefox依赖so文件:libgtk-3.so.0.1400.13.libgdk-3.so.0.1400.13.lib ...
- SearchServer Elasticsearch Cluster / kibana
S 使用nginx代理kibana并设置身份验证 https://blog.csdn.net/wyl9527/article/details/72598112 使用nginx代理kibana并设置身份 ...
- 2.抽象工厂（Abstract Factory）
常规的对象创建方法: //创建一个Road对象 Road road =new Road(); new 的问题: 实现依赖,不能应对“具体实例化类型”的变化.解决思路: 封装变化点-----哪里变 ...