1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>v-if选择指令</title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <h4>根据表达式执行的结果的真假,来选择是否要挂载到DOM上</h4>
  10.   <div id="container">
  11.         <p>{{msg}}</p>
  12.         <h5>!isMember</h5>
  13.         <!-- if执行结果是真显示 -->
  14.         <p v-if="!isMember">仅会员可见</p>
  15.         <h5>isMember</h5>
  16.         <p v-if="isMember">仅会员可见</p>
  17.         <ul>
  18.             <li v-if="answer=='a'">A</li>
  19.             <li v-else-if="answer=='b'">B</li>
  20.             <li v-else-if="answer=='c'">C</li>
  21.             <li v-else>D</li>
  22.         </ul>
  23.     </div>
  24.     <script>
  25.         new Vue({
  26.             el:"#container",
  27.             data:{
  28.                 msg:"Hello VueJs",
  29.                 isMember:false,
  30.                 answer:"a"
  31.             },
  32.             //        方法
  33.             created:function(){
  34.                 console.log("vue的实例创建完成");
  35.             }
  36.         })
  37.     </script>
  38.  </body>
  39. </html>
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>练习</title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.   <div id="container">
  10.         <h1 v-if="isDataReady">数据正在加载……</h1>
  11.         <ul v-if="!isDataReady">
  12.             <li v-for="tmp in myList">{{tmp}}</li>
  13.         </ul>
  14.     </div>
  15.     <script>
  16.         new Vue({
  17.             el:"#container",
  18.             data:{
  19.                 isDataReady:true,
  20.                 myList:[]
  21.             },
  22.             created:function(){
  23.             //Vue实例创建完成后自动调用该方法
  24.                 setTimeout(function(){
  25.                     //修改isDataReady的值
  26.                     this.isDataReady = false;
  27.                 }.bind(this),1000);
  28.                     //初始化myList
  29.                 this.myList=[100,200,300,400,500];
  30.             }
  31.         })
  32.     </script>
  33.  </body>
  34. </html>

v-if指令的更多相关文章

  1. v:bind指令对于传boolean值的注意之处

    1,

  2. linux查看文件相关指令

    以下内容整理自以下两篇文章: http://www.cnblogs.com/xilifeng/archive/2012/10/13/2722596.html Linux 查看文件内容的命令 http: ...

  3. linux文件管理指令

    总述 所有指令都可以使用--help来查看说明 例如:cat --help -x 表示参数 1.cat:用于打印文件(cat -x filename) 参数: -n:由1开始对每行进行编号 -b:由1 ...

  4. git 指令笔记

    狂躁,太狂躁!!赶上过年,赶上自己的懒癌,12月底就学完的教程直到今天才整理笔记,中途沉默在游戏中..... 只给出Windows下git指令操作,推荐大家去廖雪峰前辈那里学习(百度搜索:廖雪峰的官方 ...

  5. Linux里面的压缩和解压类指令

    gzip/gunzip 指令 ( .gz  不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...

  6. Linux服务器安全配置

    众所周知,网络安全是一个非常重要的课题,而服务器是网络安全中最关键的环节.Linux被认为是一个比较安全的Internet服务器,作为一种开放源代码操作系统,一旦Linux系统中发现有安全漏洞,Int ...

  7. orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子

    1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...

  8. Linux下的压缩和解压缩命令——zip/unzip

    zip命令 zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有".zip"扩展名 的压缩文件. 选项: -A   调整可执行的自动解压缩文件. -b<工作目录> ...

  9. linux commands

    abrt-cli --since ;查看abrt捕捉的异常 alias ;别名,alias rm='rm -i':使用“ \rm ” 使用原命令 alsamixer ;图形音量调节,q 增加左声道, ...

  10. Linux权限管理.md

    Linux 文件的权限 Linux文件权限简介 Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...

随机推荐

  1. document.domain location.hostname location.host

    document.domain    location.hostname     location.host   :https://www.cnblogs.com/shd-study/p/103031 ...

  2. pip源地址

    pip国内的一些镜像   阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/si ...

  3. HDU-1394 Minimum Inversion Number (逆序数，线段树或树状数组)

    The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...

  4. echarts柱状图个数多，横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  5. SDK manager打不开解决办法

    在下载管理android SDK过程中,有时会出现SDK manager.exe打不开的情况,网上也罗列了各种解决办法,其中地址为http://blog.csdn.net/pipisorry/arti ...

  6. 总结const、readonly、static三者的区别【收藏、转载】20190614

    总结const.readonly.static三者的区别 const:静态常量,也称编译时常量(compile-time constants),属于类型级,通过类名直接访问,被所有对象共享! a.叫编 ...

  7. C# 列出并删除一个文件夹下的所有MD5值相同的文件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. Less 混合（mixin）

    Less的混合:混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性.我们还可以带参数地调用,就像使用函数一样. .bord ...

  9. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  10. 《Webkit技术内幕》之页面渲染过程

    文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...