<!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. 牛客网Java刷题知识点之表达式类型的自动提升

    不多说,直接上干货!

  2. 查看Memcache运行状况

    Memcache Memcache是danga.com的一个开源项目,它是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的Hash表,能够用来存储各种格式的数据. 查看当前的me ...

  3. Python编程实现USB转RS485串口通信

    ---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:Python编程 ...

  4. Oracle 搭建Node.js开发环境

      先决条件 安装oralce客户端驱动. 安装node.js.   创建项目 安装oracledb模块 $npm install oracledb 如果失败了,你可能要爬墙.   参考package ...

  5. 操作文件方法简单总结(File,Directory,StreamReader,StreamWrite )（转载）

    本文转自http://www.cnblogs.com/zery/p/3315889.html 对于文件夹,文档的操作一直处于一知半解状态,有时间闲下来了,好好练习了一把,对文档,文件的操作有了一个基本 ...

  6. 粗看ES6之变量

    标签: javascript var定义变量面临的问题 可以重复定义 无法限制变量不可修改 无块级作用域 ES6变量定义升级 新增let定义变量 新增const定义常量 let特性 有块级作用域 不可 ...

  7. agc015F - Kenus the Ancient Greek(结论题)

    题意 题目链接 $Q$组询问,每次给出$[x, y]$,定义$f(x, y)$为计算$(x, y)$的最大公约数需要的步数,设$i \leqslant x, j \leqslant y$,求$max( ...

  8. Django组件:用户认证组件

    一丶用户认证 1.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: (1).authent ...

  9. 【extjs6学习笔记】1.14 初始: ViewModel

    ViewModel是一个管理特定UI组件数据的类. 可以将其视为特定视图的记录容器. 它支持与UI组件的双向数据绑定,只要用户在视图中更改数据,它具有最新的副本. 与模型不同,它不能包含代理,因此它不 ...

  10. 新客户上云 - 来自 Azure 技术支持部门的忠告

    本课程内容是来自 Azure 中国技术支持团队对新客户上云的忠告. 对于上云的新用户,Azure 技术支持部门有如下忠告: 1. 时刻关注并理解以下网站的变动来优化资源配置,更新设计方案. Azure ...