v-else-if 要紧跟 v-if

v-else要紧跟v-else-if 或 v-if

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js v-if语法使用 </title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

    <script src="node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <input type="text" v-model="age">

    <span v-if="age<20">小孩</span>

    <span v-else-if="age<30">青年</span>

    <span v-else-if="age<40">中年</span>

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

    <hr>

    <input type="checkbox" v-model="copyright"> 接受协议

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

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

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            age:0,

            copyright:false

        },

    });

</script>

</body>

</html>

Vue v-if,v-else-if,v-else的使用的更多相关文章

  1. 证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)

    U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...

  2. vue的使用与安装 npm -v报错

    1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...

  3. client version is higher than daemon version (client is v.1.29 daemon is v.1.22)

    安装好coreseek,建了索引,启动了服务,用php建了一个test.php,用于测试:<?phpinclude_once('sphinxapi.php');//向搜索引擎发起请求 $cl = ...

  4. 操作系统中的P,V操作（转）

    无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...

  5. XVI Open Cup named after E.V. Pankratiev. GP of Peterhof

    A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...

  6. XVI Open Cup named after E.V. Pankratiev. GP of Siberia

    A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...

  7. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg

    A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...

  8. XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

    A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...

  9. XVI Open Cup named after E.V. Pankratiev. GP of SPB

    A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...

  10. XIV Open Cup named after E.V. Pankratiev. GP of SPb

    A. Bracket Expression 直接按题意模拟即可. 时间复杂度$O(n)$. #include<stdio.h> #include<algorithm> #inc ...

随机推荐

  1. Linux下修改Mysql密码的三种方式

    前言 有时我们会忘记Mysql的密码,或者想改一个密码,以下将对这两种情况修改密码的三种解决方法做个总结 本文都以用户为 root 为例 一.拥有原来的myql的root的密码 方法一: 在mysql ...

  2. 正确使用Spring Data JPA规范

    在优锐课的学习分享中探讨了关于,Spring Data JPA的创建主要是为了通过按方法名称生成查询来轻松创建查询. 但是,有时我们需要创建复杂的查询,而无法利用查询生成器.码了很多知识笔记分享给大家 ...

  3. IT兄弟连 Java语法教程 流程控制语句 循环结构语句2

    双重for循环 如果把一个循环放在另一个循环体中,那么就可以形成嵌套循环,也就是双重for循环,当然嵌套循环也可以是for循环嵌套while循环,也可以是while循环嵌套while循环……,即各种类 ...

  4. Django多进程滚动日志的问题

    使用RotatingFileHandler控制日志文件的大小 # settings.py LOGGING = { ... 'handlers': { ... 'file': { 'level': 'I ...

  5. 【编译系统01】编译器 - 词法分析器(lexial)的设计思路

    时间:2019/11/29 首先,词法分析器由一个扫描器与状态机组成. 一. 词法分析器整体设计流程 二.设计细节 1. code.txt: 我们假设读取下面文本 2.符号类型的设计 我们使用 enu ...

  6. oracle学习笔记（二十二） REF 动态游标

    动态游标 定义语法 --声明 $cursor_name$ sys_refcursor --打开动态游标 open $cursor_name$ is 查询语句; --关闭游标 close $cursor ...

  7. 零零总总遇到过的CSS 样式

    1:添加弹出框阴影 2:禁止文本域缩放 3:直接使用CSS 完成文本内容大小写(针对英文) 4: 文本框中的占位符 5:让table每列一样高 6:不使用js 让内容换行 word-break 7:曾 ...

  8. C++ 手把手教你实现可变长的数组

    01 实现自定义的可变长数组类型 假设我们要实现一个会自动扩展的数组,要实现什么函数呢?先从下面的main函数给出的实现,看看有什么函数是需要我们实现的. int main() { MyArray a ...

  9. DesignPattern系列__08UML相关知识

    前言 现在,很少有人和90年代一样,自己去实现一个软件的各个方面,也就是说,在工作中,和人沟通是必备的技能.那么,作为一枚码农,如何和他人沟通呢?这就要依靠本文的主题了--UML. 简介 UML--U ...

  10. CVE-2019-0708-BlueKeep漏洞复现

    环境 攻击机:Kali Linux IP:192.168.0.108 靶机:Windows Sever 7 SP1 旗舰版 IP:192.168.0.109 Exploit: https://gith ...