Vue学习5:条件渲染
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--v-if指令-->
<p v-if="seen>100">you can see me</p>
<p v-else-if="seen>50">or you can see me</p>
<p v-else-if="seen>10">you may see me</p>
<p v-else>well, you can only see me</p>
<!--注意:v-else、v-else-if必须跟在v-if或v-else-if后面--> <!--vue会尽可能高速的渲染元素,通常是复用已有元素-->
<!--下面代码中切换loginType不会清除已输入的内容,因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder-->
<template v-if="loginType==='username' ">
<label for="um">username</label>
<input type="text" placeholder="enter username" id="um">
</template>
<template v-else>
<label for="email">email</label>
<input type="text" placeholder="enter email" id="email">
</template>
<button @click="ToggleLoginType">toggle login type</button> <br> <!--如果想表达“这两个元素是独立的,不要复用它们”,那么使用key-->
<!--这样每次切换时,输入框都会被重新渲染-->
<template v-if="loginType==='username' ">
<label for="um1">username</label>
<input type="text" placeholder="enter username" id="um1" key="username">
</template>
<template v-else>
<label for="email1">email</label>
<input type="text" placeholder="enter email" id="email1" key="email">
</template>
<!--注意label仍然被高效复用,因为它没有唯一值key--> <!--v-show使用-->
<p v-show="shown">this will be shown</p>
<!--v-show不支持template元素,也不支持v-else-->
</div> <script>
new Vue({
el: '#app',
data:{
seen: 11,
loginType: 'username',
shown: true
},
methods:{
ToggleLoginType:function(){
if(this.loginType==='username'){
this.loginType ='email';
}else{
this.loginType='username';
}
}
}
})
</script>
</body>
</html>
运行结果:
这里再补充两点:
1.html中的<template>元素是一种保存客户端内容的机制,该内容在页面加载时不被渲染,但是运行时可以使用js实例化。
2.v-if与v-show的区别:
v-show只是简单的切换css属性display,元素始终被渲染被保存在DOM中;
v-show的切换开销相比v-if小,但是初始渲染开销比v-if大;
因此频繁切换,使用v-show;运行后很少改变,使用v-if。
参考:MDN <template>,https://cn.vuejs.org/v2/guide/conditional.html
Vue学习5:条件渲染的更多相关文章
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue 样式绑定 && 条件渲染
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue 基础自查——条件渲染和列表渲染
v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...
- 3-6 Vue中的条件渲染
本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...
- Vue指令之条件渲染
1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- vue学习笔记(二)- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
- Vue学习(四):条件渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 关于linux上部署定时python脚本
遇到的坑: Python脚本中的文件操作,最好都用绝对路径, 文件头上写 #!/usr/local/bin/python3.6 ----------------------------------- ...
- vw实现移动端自适应页面
一.设备支持情况 测试网站:https://caniuse.com/#search=vw css3test:https://airen.github.io/css3test/,https://gith ...
- 2017-10-29—英语发音的一些技巧总结
学习了这么多年英语还是一句口语也说不出口,大家一定像我一样有hin多的f*k想说. 在很小的时候我们就学了英语音标,知道了有前元音.中元音.后元音(很多同志多年不用应该已经把这些忘得差不多了,like ...
- Ubuntu12.04 LTS 32位 安装ns-2.35
ubuntu12.04lts 32-bit默认采用gcc 4.6和g++4.6,而ns的最新版本ns 2.3.5也采用了相同到版本,所以这方面不会有版本不同到问题 收回上面这句话..../valida ...
- AMPPZ-2015 (MIPT Workshop Open 1)
A. Album of Numbers 设$cnt[i]$表示数字$i$的个数,则$ans=\frac{\sum_{i} i\times cnt[i]\prod_{j>i}(cnt[j]+1)} ...
- window iis重启
WINDOWS server 任务计划实现定时自动重启IIS编写批处理文件IIS.bat@echo offnet stop iisadmin /yesnet start iisadminnet sta ...
- 客户端无法加入域,报错:“无法与域‘xxx.com’的Active Directory域控制器(AD DC)链接” 请确保键入的域名正确
1.客户端能不能解析到域名? nslookup 一下域名看看解析到的IP的地址 2.客户端的DNS要指向DC 3.客户端的相关服务,workstation,TCP/IP NetBios Helper, ...
- Android makefile
LOCAL_PATH := $(call my-dir) { call函数:根据不同的参数和函数得到不同的值my-dir函数: 获取当前含有.mk的路径LOCAL_PATH: 定位源文件的位置 } # ...
- 19.3.19 使用Flask框架搭建一个简易登录服务器
import Flask import json from Flask import request server1 = flask.Flask(__name__) #实例化一个flask对象 @se ...
- nodejs 使用superagent+cheerio+eventproxy爬取豆瓣帖子
//cnpm install superagent cheerio eventproxy fs pathvar superagent = require('superagent'); var chee ...