<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>vue--循环语句</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
<div id="app">
<p v-if="seen">
看下我
<template v-if="ok">
<h1>悟空</h1>
<p>
三打白骨精
</p>
{{#if ok}}
<h1>yes</h1>
{{/if}}
</template>

</p>

</div>

<!--v-else-->
<div id="else">
<!--Math.random()取随机数-->
<div v-if="Math.random()>0.5">
sorry
</div>
<div v-else>
welcome
</div>
</div>

<!--v-else-if-->
<div id="elseif">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<!--v-for 指令需要以 site in sites 形式的特殊语法,
sites 是源数据数组并且 site 是数组元素迭代的别名。-->
<div id="vfor">
<ol>
<li v-for="dog in dogs">
{{dog.name}}<br>
--------------
</li>
</ol>
<ul>
<template v-for="dog in dogs">
<li>{{ dog.name }}</li>
<li>--------------</li>
</template>
</ul>
</div>

<div id="forobj">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value,key) in object">
{{key}}:{{ value }}
</li>
</ul>
<ul>
<li v-for="(value,key,index) in object">
{{index}}: {{key}}:{{ value }}
</li>
</ul>
</div>
<div id="forint">
<ul>
<li v-for="n in 10"> {{n}}</li>
</ul>
</div>
</body>
<script>
<!--v-for 迭代对象-->
new Vue({
el:'#forint'
})
</script>

<script>
<!--v-for 迭代对象-->
new Vue({
el:'#forobj',
data:{
object:{
name:'悟空',
race:'猴子',
address:'花果山',
post:'美猴王'
}
}
})
</script>
<script>

<!--v-for -->
new Vue({
el:'#vfor',
data:{
dogs:[
{name:'泰迪'},
{name:'二哈'},
{name:'金毛'},
{name:'藏獒'},
]
}
})
</script>

<script>
<!--v-else-if-->
new Vue({
el:'#elseif',
data:{
type:'A'
}
})
</script>

<script>
<!--v-else-->
new Vue({
el:'#else',
})
</script>

<script>
new Vue({
el:'#app',
data:{
seen:true,
ok:false
}
})
</script>

</html>

vue---条件与循环语句的更多相关文章

  1. Python 2.7 学习笔记 条件与循环语句

    本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...

  2. Python中的条件和循环语句

    条件和循环语句 1. 条件语句 if单用 格式:if 条件表达式 例如:if 5 > 3: print('True') >>> 'True' #当条件满足时才会执行上述操作. ...

  3. python系列八:Python3条件控制&循环语句

    #!/usr/bin/python #-*-coding:gbk-*-#Python3 条件控制&循环语句import randomage = int(input("请输入你的年龄: ...

  4. python实例 条件和循环语句

    #! /usr/bin/python #条件和循环语句 x=int(input("Please enter an integer:")) if x<0:     x=0    ...

  5. python之最强王者(3)——变量,条件、循环语句

    1.Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的 ...

  6. PL/SQL学习(二)条件和循环语句

      原文参考:http://plsql-tutorial.com/   PLSQL条件语句 IF THEN ELSE STATEMENT 1) IF condition THEN  statement ...

  7. r语言之条件、循环语句

    if条件语句:if (conditon) {expr1} else {expr2} > x<-1> if(x==1)+ {x<-"x=1"}else+ {x ...

  8. #7 Python顺序、条件、循环语句

    前言 上一节讲解了Python的数据类型和运算,本节将继续深入,涉及Python的语句结构,相当于Python的语法,是以后编写程序的重要基础! 一.顺序语句 顺序语句很好理解,就是按程序的顺序逻辑编 ...

  9. Vue.js:循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

  10. JavaScript里面的条件、循环语句以及异常处理

    1.JavaScript里面条件语句主要有两种形式 if(条件){ ... }else if(条件){ ... }else{ ...} switch(变量名): case 值1://如果变量名为值1, ...

随机推荐

  1. UML类图中最重要的几种类关系及其表示

    阅读UML图最常见到的类与类之间的关系有如下几种: 1.依赖关系 依赖关系是指一个类在计算时,应用了“另一个类”类型的参数,这种关系是偶然.临时.弱的. UML类图中,依赖关系用带单箭头的虚线表示,即 ...

  2. 修改docker出现中文字符出现乱码的问题

    修改docker出现中文字符出现乱码的问题 在启动容器时 指定选项  -e LANG=en_US.UTF-8

  3. 关于dom&bom

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C的标准:[所有浏览器 ...

  4. apex透视自瞄无后子弹追踪飞天加速辅助

    apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助apex透视自瞄无后子弹追踪飞天加速辅助 ...

  5. 5、AngularJS 直接绑定显示html ($sce、$sanitize服务)

    1.直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet).html:ng-bind-html="snippet") 以下代码 ...

  6. 机器学习之朴素贝叶斯&贝叶斯网络

    贝叶斯决决策论       在所有相关概率都理想的情况下,贝叶斯决策论考虑基于这些概率和误判损失来选择最优标记,基本思想如下: (1)已知先验概率和类条件概率密度(似然) (2)利用贝叶斯转化为后验概 ...

  7. CentOS6.5 - yum对Mysql的安装与配置

    一.mysql的安装 1.查看是否安装mysql [root@localhost ~]# rpm -qa | grep mysql 如果有进行卸载(以下三种方式选一种即可): -.el6.x86_64 ...

  8. python 游戏 —— 汉诺塔(Hanoita)

    python 游戏 —— 汉诺塔(Hanoita) 一.汉诺塔问题 1. 问题来源 问题源于印度的一个古老传说,大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆 ...

  9. git和github的第一次接触

    我的github的helloworld链接: https://github.com/xuziqian111/hello-world/blob/master/helloworld.java 我的gith ...

  10. python del关键字的用法

    del Keyword 注意del是python关键字,就像def.and.or一样.它不是字典.列表的方法,但是可以用来删除字典.列表的元素.比如: del list_item[4] del dic ...