vue条件判断循环
条件判断 v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="isShow">holle world</p>
<p v-else>holle python</p>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
isShow:true,
},
methods:{ }
}) </script>
</body>
</html>
条件显示 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-show 是样式上的修改 display:none -->
<!-- v-if dom元素直接不存在 -->
<!-- 显示和隐藏高频切换时用v-show -->
<div id="app">
<p v-show="isShow">holle world</p>
<p v-show="noShow">holle world</p> </div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
isShow:true,
noShow:false,
},
methods:{ }
}) </script>
</body>
</html>
循环 v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in names">{{index+1}} {{item}}</li>
</ul> <ul>
<li v-for="(item, key, index) in arr" :key="item">{{index}}.{{key}} :{{item}}</li>
</ul>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
names:["moon", "light", "is", "beautiful"],
arr:{
name:"moon",
age:18,
height:178,
weight:130
}
},
methods:{ }
}) </script>
</body>
</html>
用户切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 存在小问题， 在用户输入值后，切换方式，内容不会清空 可用key来做区别，不同的时候就不会复用-->
<div id="app">
<span v-if="isChange"><label for="账号">账号：</label><input id="username" type="text" placeholder="账号登录" key="username"></span>
<span v-else><label for="邮箱">邮箱：</label><input id="mail" type="text" placeholder="邮箱登录" key="mail"></span>
<input type="button" :value="value" @click="btmclick"></input>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
isChange:true,
},
methods:{
btmclick(){
this.isChange = !this.isChange
}
},
computed:{
value(){
if (this.isChange){
return "邮箱登录"
}
else{
return "账号登录"
}
}
} }) </script>
</body>
</html>
vue条件判断循环的更多相关文章
- Python 条件判断 循环
age = 20 if age >= 18: print('your age is', age) print('adult') 根据Python的缩进规则,如果if语句判断是True,就把缩进的 ...
- python笔记五（条件判断/循环/break和continue）
一 条件判断 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> elif <条件判断3>: <执行3> ...
- 值类型之间的相互转化,运算符,if条件判断,循环,函数
值类型之间的相互转化 number | string | boolean 一.转换为boolean=>Boolean(a); var num = 10; var s = '123'; var b ...
- Python基础：条件判断 &&循环
1:条件判断 2:循环 2.1:for 2.2 while 小结: continue :跳出本次循环 进行下次循环, break :结束循环体.
- Ruby学习中(条件判断, 循环, 异常处理)
一. 条件判断 详情参看:https://www.runoob.com/ruby/ruby-decision.html 1.详情实例(看看就中了) #---------------# # LOL场均人 ...
- python 输入输出 条件判断 循环
1.条件判断 score = int(input("请输入学生成绩:"))if score>100 and score <0: print("请输入正确的成绩 ...
- vue条件与循环
通过vue控制切换一个元素的显示也相当简单: <div id="app-3"> <p v-if="seen">Now you see m ...
- vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
- Vue.js：条件与循环
ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...
- 【Python⑥】python的缩进，条件判断和循环
缩进 Python的最大特色是用缩进来标明成块的代码. 这点和其他语言区别很明显,比如大家熟悉的C语言里: ) { num+=; flag-=; } 而在python中: if flag>= 0 ...
随机推荐
- JAVA 作业
1.让用户分2次输入2个整数,输出2个数的最大值,最小值 import java.util.Scanner;class Demo01 { public static void main(String[ ...
- CSS 常用样式-盒模型属性
盒模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin. 常见盒模型区域: • 盒模型 ...
- 简单了解promise
promise是什么: JavaScript中存在很多异步操作, Promise将异步操作队列化,按照期望的顺序执行,返回 符合预期的结果.可以通过链式调用多个 Promise达到我们的目的. Pro ...
- 区分 PaaS、IaaS 、SaaS
- 磊磊零基础打卡算法：day16 c++ Trie树
5.19 Trie树: 用处:快速的查找和高效存储字符串集合的数据结构. 类似如此的查找,存储 其简单的两个操作:插入和删除 插入: void insert(char str[]) { int p; ...
- 什么是js柯里化（curry）？
在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术. 举例来说,一个接收3个参数的普通函数,在进行柯里化后,柯里化版本的函数接收一个参数并返回接收下一个参数 ...
- JSTl_概述和JSTL_常用便签if
概念: JavaServer Pages Tag Library JSP 标准标签片*是由 Apache 组织提俱的开源的免费的 jsp 标签 <标签> 作用:用于简化和替换 jsp 页面 ...
- 整数划分问题（Java递归）
整数划分问题(Java递归) 文章目录 整数划分问题(Java递归) 0. 问题描述 1.递归式 2.代码 3.参考 0. 问题描述 整数划分问题 将正整数n表示成一系列正整数之和:n=n1+n2+- ...
- 实验六 开源控制器实践——RYU
(一)基本要求 搭建SDN拓扑,协议使用Open Flow 1.0,并连接Ryu控制器,通过Ryu的图形界面查看网络拓扑. 阅读Ryu文档的The First Application一节,运行当中的L ...
- <context:component-scan/>和<mvc:annotation-driven/>的区别
1 <context:annotation-config/> 如果你想使用@Autowired注解,那么就必须事先在 spring 容器中声明 AutowiredAnnotationBea ...