vue - 条件语句
1.与小程序不同之处一，小程序无论变量还是常亮都可以用双向绑定来解决{{}},而vue一旦双(单)引号包起来以后就失效了.
2.注意一点，切记双引号注意不要混淆哈，这里是一排双引号包单引号，那里是一排单引号包双引号
3.注意 = 、== 、===、 !=、 !==的区别.
4.频繁切换就不要用v-if了，用v-show(满足条件block，否则none)=>效率.
<!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>
<!-- Step1.对于vue,可以用cdn -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head> <body> <!-- Step2.绑定 -->
<div id="app"> <!-- if....else -->
<div v-if="message=='hello World!'">登陆成功,嘿~</div>
<div v-else>请登录！</div> <!-- 条件显示隐藏，被控制着display属性中的block和none -->
<div v-show='message'>v-show,我就block了！</div> <!-- v-else-if -->
<div v-if="message=='hello'">hello</div>
<div v-else-if="message=='hello World'">hello World!!! v-else-if成功了啊</div>
<div v-else-if="message=='hello Worlds'">hello World</div>
<div v-else="message">else显示哈!!!</div> <!-- 我发现一个问他呐，小程序都是{{}}绑定的,但是一旦到值的话，vue就不准许用{{}}绑定数据了! -->
{{message}} </div> <!--Step3：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app = new Vue({ // 创建Vue对象,Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
message: 'hello World!' // message 自定义的数据信息，如小程序的data:{}
}
})
</script>
</body> </html>
vue - 条件语句的更多相关文章
- vue条件语句v-if、v-else、v-else-if用法
vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...
- vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法
<div id="main" > <button id='but1' type="button" v-on:click="save ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- 第九篇:vue条件语句
好家伙,终于有个简单了的 v-if 条件判断 <div id="app"> <p v-if="seen">现在你看到我了</ ...
- vue之条件语句小结
vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...
- vue(二)--条件语句
条件语句:v-if v-else v-else-if v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...
- Python —条件语句
条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...
- php简写表达式，&& or || 缩写条件语句
有时候学的多了, 好多小细节 都忘了 ,比如 简单的表达式, 三元表达式 ?:; $aa or $bb 表达式 等等! 写一些简单的表达式,备忘! php用&&和||缩写条件语句 ...
- java中的条件语句（if、if...else、多重if、嵌套if）
Java条件语句之 if 生活中,我们经常需要先做判断,然后才决定是否要做某件事情.例如,如果考试成绩大于 90 分,则奖励一个 IPHONE 5S .对于这种"需要先判断条件,条件满足后才 ...
随机推荐
- ZOJ 3211 Dream City
贪心,$dp$. 假设我们知道要选择哪些物品,那么这些物品应该按什么顺序选择呢? 物品$A(a1,b1)$,物品$B(a2,b3)$. 假设物品$A$在第$x$天被选择,物品$B$在第$y$天被选择. ...
- [转载]开发 Spring 自定义视图和视图解析器
原文出处 http://www.ibm.com/developerworks/cn/java/j-lo-springview/ 概述 Spring 3.0 默认包含了多种视图和视图解析器,比如 JSP ...
- 洛谷——P1724 东风谷早苗
P1724 东风谷早苗 题目描述 在幻想乡,东风谷早苗是以高达控闻名的高中生宅巫女.某一天,早苗终于入手了最新款的钢达姆模型.作为最新的钢达姆,当然有了与以往不同的功能了,那就是它能够自动行走,厉害吧 ...
- WebService的网络协议
SOAP协议.XML-RPC以及Hessian 是WebService的主要传输(编码)协议 SOAP即简单对象访问协议(Simple Object Access Protocol),它是用于交换XM ...
- 【BZOJ 3530】【SDOI 2014】数数
http://www.lydsy.com/JudgeOnline/problem.php?id=3530 上午gty的测试题,爆0了qwq 类似文本生成器那道题,把AC自动机的转移建出来,准确地说建出 ...
- 【动态规划/二维背包问题】mr355-三角形牧场
应该也是USACO的题目?同样没有找到具体出处. [题目大意] 和所有人一样,奶牛喜欢变化.它们正在设想新造型牧场.奶牛建筑师Hei想建造围有漂亮白色栅栏的三角形牧场.她拥有N(3≤N≤40)块木板, ...
- 93.数字三角形W（深搜）
2189 数字三角形W 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 数字三角形 要求走到最后mod 10 ...
- SNAT的作用是什么
SNAT,可能有人觉得奇怪,好好的为什么要进行ip地址转换啊,为了弄懂这个问题,我们要看一下局域网用户上公网的原理,假设内网主机A(192.168.2.8)要和外网主机B(61.132.62.131) ...
- jQuery插件示例笔记
插件的种类 封装对象方法的插件 将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作. //注意,为了更好的兼容性开始前有个分号 ;(function($){ //此处将$作为匿名函数的 ...
- [转] Moran's I
李旭, Matlab: Moran's I原文地址 Introduction In statistics, Moran's I is a measure of spatial autocorrelat ...