<!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. #define 只是字符替换

    可以使用 #define MAX 100 int main (int argc, char *argv[]) { printf("MAX is %d\n", MAX); ; } g ...

  2. 高可用数据同步方案-SqlServer迁移Mysql实战

    简介 随着业务量的上升,以前的架构已经不满足业务的发展,数据作为业务中最重要的一环,需要有更好的架构作为支撑.目前我司有sql server转mysql的需求,所以结合当前业务,我挑选了阿里云开源的一 ...

  3. [原创]Nodejs 远程执行linux shell

    分享几个基于nodejs远程执行linux shell的函数 参数说明: ips - 一个存有IP地址的数组对象 /** * Created by kevalin on 2015/4/27. */ v ...

  4. WebGL之物体选择

    原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择.比如鼠标点击后判断是否选中了某个图形或图形的某个部分. 本节实现的效果: ...

  5. WPF动画的几种模式

    最近在用WPF做简单动画,以下是几点经验总结: 1. 使用DispatcherTimer做动画 VB6的年代大家就用Timer做动画了,不用多解释,这个DispatcherTimer和本身的Timer ...

  6. agc016B - Colorful Hats(智商题)

    题意 题目链接 有$n$个人,每个人有一种颜色,第$i$个人说除了我之外有$a_i$种不同的颜色,问是否存在一组合法解 Sol 700分的题就这么神仙了么..好难啊... 先说结论吧 设$mx, mn ...

  7. spring mvc 的理解

    1.Spring MVC是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基 ...

  8. elasticSearch 分布式安装

    1.在elasticSearch下的config下elasticsearch.yml文件最后一行添加注意 一定要加空格在:后面http.cors.enabled: truehttp.cors.allo ...

  9. SQLSERVER编译与重编译

    SQLSERVER编译与重编译 编译的含义 当SQLSERVER收到任何一个指令,包括查询(query).批处理(batch).存储过程.触发器(trigger) .预编译指令(prepared st ...

  10. c++树的表示方法

    c++树的节点的表示方法: typedef struct Node *Tree; struct Node { int data; Node *left; Node *right; int flag; ...