<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="vue">

        <input v-model="num" type="number">

       <span v-if="num<18">小孩</span>

       <span v-else-if="num<30">少年</span>

       <span v-else-if="num<50">中年</span>

       <span v-else>老年</span>

        <hr>

        协议<br>

        <input v-model="copyright"  type="checkbox">同意<br>

        <span v-if="!copyright">请先接受协议</span>

        <button v-else>注册</button>

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            copyright:false,

            num:0,

        }

    });

</script>

</html>

效果:

v-show ：将元素display v-if :remove dom元素 v-else 的运用：else 必须跟在v-if

Now you see me

Now you don't

这里面可以传参 对象。数组。字符串。对象可以是{color:true} 这样来判断是否显示等等。

v-for : 三种方式

v-for =" val in items">{{val.text}}

v-for =" (val,name) in items">{{item.text}}

可以遍历属性 如下 可以遍历 obj:{text:1,name:2}

v-for =" (val,name,index) in items">{{item.text}}

indxe 是索引

也可以遍历组件

将组件循环显示多次

14.VUE学习之-v-if v-else-if语法在网站注册中的实际应用讲解的更多相关文章

  1. 014——VUE中v-if语法在网站注册中的实际应用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 14 vue学习 postcssrc eslintrc.js babelrc

    一  .postcssrc.js 众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量 ...

  3. 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue学习笔记（一）： 建立 vue-cli 初始网站

    在安装vue-cli之前,要先安装node.js这个大家百度一下就可以了 1.安装 vue-cli npm install -g @vue/cli-init 2.初始化一个项目,名为 hcmanage ...

  5. 07.VUE学习之解决phpstorm不识别ECMASCRIPT6语法的问题

    此时已经识别:

  6. 学习动态性能表(14)--v$parameter&v$system_parameter

    学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER  2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...

  7. 学习动态性能表 v$sql

    学习动态性能表 第三篇-(1)-v$sql V$SQL中存储具体的SQL语句. 一条语句可以映射多个cursor,因为对象所指的cursor可以有不同用户(如例1).如果有多个cursor(子游标)存 ...

  8. 学习动态性能表(4)--v$sqltext&v$sqlarea

    学习动态性能表 第四篇-(1)-V$SQLTEXT  2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...

  9. Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...

随机推荐

  1. Gym 100971D Laying Cables 二分 || 单调栈

    要求找出每个a[i],找到离他最近而且权值比它大的点,若距离相同,输出权利最大的那个 我的做法有点复杂,时间也要500+ms,因为只要时间花在了map上. 具体思路是模拟一颗树的建立过程,对于权值最大 ...

  2. 汇编debug

    R:查看.改变CPU寄存器的内容 D:查看内存中的内容 E:改写内存中的内容 U:将内存中的机器指令翻译成汇编指令 T:执行一条机器指令 A:以汇编指令的格式在内存中写入一条机器指令 第一步:先是[开 ...

  3. <Linux系统uname命令用法>

    uname命令:操作系统信息的显示 uname 命令主要用于显示操作系统的信息,包括版本.平台的信息. 它的参数主要有以下: -a 显示全部信息 -s 显示内核名称 -n 显示主机名 -r 显示当前系 ...

  4. IIS错误HTTP 错误 500.21 - Internal Server Error

    原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:以管理员身份运行cmd->输入“%windir%\Microsoft.NET\Framewo ...

  5. JVM虚拟机 - 内存

    在JVM虚拟机中,内存部分大致可以分为以下几类: Heap:堆 NonHeap:非堆 CodeCache:缓存编辑后的机器码的内存区域 CompressedClassSpace:类压缩空间 MetaS ...

  6. IDEA/AS快捷键收集&习惯

    1.Alt+Enter单包引入 2.Ctrl+O (在类中)快速重写父类方法 3.Ctrl+F12显示类结构 4.代码提示 -Ctrl+Alt+空格 代码提示 -Ctrl+Shift+回车 在末尾自动 ...

  7. bootstrapTable的数据后端分页排序

    数据后端分页排序,其实就是sql语句中oeder by做一些限制. 之前在写sql语句中的order by是写死,既然要写活,就要传参数到后台. 之前讲到bootstrapTable的queryPar ...

  8. 命名空间namespace、smarty使用（视图分离，MVC）、smarty模板语法、smarty缓存、MVC模式

    一.命名空间:namespace 命名空间 可以理解为逻辑上的使用,为了防止重名 namespace :关键字 加载:require_once();//加载一次 include_once() 申明命名 ...

  9. react的setState使用中遇到的问题

    setState()更新的数据和自己预期的不一致 对 React 新手来说,使用 setState 是一件很复杂的事情.即使是熟练的 React 开发,也很有可能因为 React 的一些机制而产生一些 ...

  10. Css文件目录结构

    一般一个网站会有这么三个样式: global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) global.css | res ...