vue.js实战——vue元素复用
Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="type==='name'">
<label>用户名：</label>
<input type="text" placeholder="输入用户名">
</template>
<template v-else>
<label>邮箱</label>
<input type="text" placeholder="输入邮箱">
</template>
<button @click="handleToggleClick">切换输入类型</button>
</div>
<script>
//input和label会被复用 不信你看控制台Elements 在用户名input输入内容后，点击button，会发现input的内容没有改变！！！！！
var app=new Vue({
el:'#app',
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type=this.type==='name'?'mail':'name';
}
}
})
</script>
</body>
</html>
注意：：
可以使用添加key属性，取消元素的复用。（key值必须是唯一的！！！！！！！！）
vue.js实战——vue元素复用的更多相关文章
- vue.js实战——vue 实时时间
created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- vue.js实战(文摘)
---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...
随机推荐
- Elasticsearch修改network后启动失败
修改 /config/elasticsearch.yml(我的安装目录是:/var/www/elasticsearch-6.4.2/elasticsearch-6.4.2), network.host ...
- Java开发笔记（三十八）利用正则表达式校验字符串
前面多次提到了正则串.正则表达式,那么正则表达式究竟是符合什么定义的字符串呢?正则表达式是编程语言处理字符串格式的一种逻辑式子,它利用若干保留字符定义了形形色色的匹配规则,从而通过一个式子来覆盖满足了 ...
- Burnside引理与Polya定理
感觉这两个东西好鬼畜= = ,考场上出了肯定不会qwq.不过还是学一下吧用来装逼也是极好的 群的定义 与下文知识无关.. 给出一个集合$G = \{a, b, c, \dots \}$和集合上的二元运 ...
- html初步学习
①:<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale ...
- Dynamics 365 CE中AsyncOperationBase表记录太多，影响系统性能怎么办？
微软动态CRM专家罗勇 ,回复311或者20190311可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 本文主要是根据微软官 ...
- asp.net core webApi 参数保护
asp.net core webApi 参数保护 Intro asp.net core data protection 扩展,基于 IDataProtector 扩展的数据保护组件,自动化的实现某些参 ...
- Network Policy - 每天5分钟玩转 Docker 容器技术（171）
Network Policy 是 Kubernetes 的一种资源.Network Policy 通过 Label 选择 Pod,并指定其他 Pod 或外界如何与这些 Pod 通信. 默认情况下,所有 ...
- 多线程——multiprocess
先看个误打误撞的写的代码 import os import time import multiprocessing def func(): print('我是func函数1','现在的father进程 ...
- 【Teradata】安装SQL Assistant和Administrator 16.20（含查看.net版本）
1.安装介质获取: 获取的路径:connections==>Gateways==>Customer Services==>TOOLS & APPLICATIONS(点击Mor ...
- Flink Pre-defined Timestamp Extractors / Watermark Emitters（预定义的时间戳提取/水位线发射器）
https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/event_timestamp_extractors.html 根据官网 ...