<!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. Docker 镜像制作 CentOS+JDK+Tomcat

    [root@localhost createImages]# ls apache-tomcat-.tar.gz server-jre-8u121-linux-x64.tar.gz [root@loca ...

  2. 美国一家科技公司毕威拓（Pivotal）规定员工在早上9点06分准时上班，以提高工作效率。

    美国一家科技公司毕威拓(Pivotal)规定员工在早上9点06分准时上班,以提高工作效率. 据<英国广播公司BBC>报道,美国科技公司毕威拓(Pivotal)的员工每天都要在9点06分准时 ...

  3. 牛客网Java刷题知识点之基本类型的自动转换和基本类型的强制转换

    不多说,直接上干货! TypeConvertDemo.java //自动类型转换 class TypeConvertDemo { public static void main(String[] ar ...

  4. vs2017通过模块文件添加自定义注释

    有时我们在VS里建立类和接口时,需要添加比较规范的注释信息,而每次都要复制粘贴比较麻烦,所以需要我们的IDE做一些支持,比较修改VS里自定义的注释模式,以添加自己公司需要的信息格式. 注释比较规范,是 ...

  5. iOS 基础笔试题

    参考:https://www.jianshu.com/p/1d3496bc5bda 1.#import 跟#include.@class有什么区别?#import<> 跟 #import& ...

  6. vue-elem-stylus 的mixin用法

    .tab border-1px{red} minxin border-1px(&color) position:relative &::after display:block posi ...

  7. web端 css hack（一）

    逢10月小长假,几天不敲键盘,浑身难受.也是有时间分享一下自己遇到的css问题.先说一下什么css hack 简单介绍一下css hack: 定义: 一般都是利用各浏览器的支持CSS的能力和BUG来进 ...

  8. Java开发工具IntelliJ IDEA创建Andriod项目示例说明

    IntelliJ IDEA社区版作为一个轻量级的Java开发IDE,是一个开箱即用的Android开发工具. 注意:在本次的教程中我们将以Android平台2.2为例进行IntelliJ IDEA的使 ...

  9. 常用的Homebrew命令

    一些常用的Homebrew命令: 更新:brew update 安装包信息检索:brew info 安装包搜索:brew search foo 安装包列表:brew list 过时信息:brew ou ...

  10. Eucalyptus简介

    1.Eucalyptus是什么? Eucalyptus  n.桉树 Eucalyptus is a Linux-based software architecture that implements ...