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 - 条件语句的更多相关文章

  1. vue条件语句v-if、v-else、v-else-if用法

    vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...

  2. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

  3. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  4. 第九篇:vue条件语句

    好家伙,终于有个简单了的 v-if    条件判断 <div id="app"> <p v-if="seen">现在你看到我了</ ...

  5. vue之条件语句小结

    vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...

  6. vue(二)--条件语句

    条件语句:v-if     v-else   v-else-if    v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...

  7. Python —条件语句

    条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...

  8. php简写表达式，&& or || 缩写条件语句

    有时候学的多了, 好多小细节 都忘了 ,比如 简单的表达式, 三元表达式   ?:; $aa or $bb 表达式 等等! 写一些简单的表达式,备忘! php用&&和||缩写条件语句 ...

  9. java中的条件语句（if、if...else、多重if、嵌套if）

    Java条件语句之 if 生活中,我们经常需要先做判断,然后才决定是否要做某件事情.例如,如果考试成绩大于 90 分,则奖励一个 IPHONE 5S .对于这种"需要先判断条件,条件满足后才 ...

随机推荐

  1. 探索"+"的原本

    躺了一会,回忆以前看过的一些描述"原本"的知识,突然想到简单的数学运算1+1=2,在程序设计里的原本是什么呢,想到这里,不睡了,按照前人的指引,我也来探索一下阿 (以下代码使用C# ...

  2. linux c 学习笔记

    gcc是linux c编译器 gcc -o o指定文件名或者会生成a.out文件 comment 注释 generate(生成) some simple ouput 使用标准 为C89

  3. HRBUST 1200 装修

    $dp$. $dp[i]$记录铺满$3*i$的方案数.最后两列铺了$1$个$2*2$的和两个$1*1$的,或者是最后$1$列铺了$3$个$1*1$的. 因此$dp[i]=dp[i-1]+dp[i-2] ...

  4. 日期（date）运用座谈会

    前言 最近老被小伙伴戳:其实这些都是些很基础的东西,一边完善工具类:一边整理一下关于date的常见运用:以后使用起来就不需要到处去找了:争取做到想要的这儿都有. 正文 private static f ...

  5. 洛谷——P1276 校门外的树（增强版）

    P1276 校门外的树(增强版) 题目描述 校门外马路上本来从编号0到L,每一编号的位置都有1棵树.有砍树者每次从编号A到B处连续砍掉每1棵树,就连树苗也不放过(记 0 A B ,含A和B):幸运的是 ...

  6. MAC安装go

    下载官方pkg文件,一路傻瓜next就行了. pkg默认是安装到/usr/local/go 安装完成,接下来是配置mac下的环境变量.打开终端(Terminal),敲入一下代码:cd ~ #进入当前用 ...

  7. 通过myEclipse创建hibernate的实体类

    今天有个新项目中需要使用到hibernate,刚好数据库表已经创建完毕,就顺便来总结一下通过myEclipse创建hibernate的实体类. 1..在myEclipse中选择MyEclipse Da ...

  8. 【状压dp】Travelling

    [hdu3001]Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  9. [USACO13NOV]No Change

    题目大意: 你有k(k<=16)个硬币,每个硬币都有自己的面值. 现在你要给n件商品付钱,每件商品也有自己的价格. 然而老板是个奸商,他绝对不会给你找钱. 你每次付钱只能用一个硬币,但是你可以一 ...

  10. mysql服务常用命令

    一.查出当前mysql正在执行的sql命令mysql> show full processlist; 然后找出要终止的语句的idmysql> kill id号 未登录的情况下>mys ...