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. 什么是CSS?它的特点有哪些？

    css 中文名称:层叠样式表,也称级联样式表 英文名称:Cascading Style Sheets 最新的版本:css3 1.层叠性 在权重(优先级)相同的情况下,同一个标签的样式发生冲突, 最后定 ...

  2. Update 19.11 for Azure Sphere

    今天,微软发布了面向Azure Sphere的19.11更新,其主要亮点就是加入了对开发工具Visual Studio Code和Linux开发环境的支持.具体来讲,本次更新包含3个部分: 1. Az ...

  3. PHP 的异步并行和协程 C 扩展 Swoole (附链接）

    PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...

  4. leetcode一刷总结，明天二刷

    1:基础的数据结构:图掌握极差,二叉树次之 2:常用的算法思想:dp,深度有先,广度优先等等. 3:优化以解决的题目,注意思想的总结 4:将约150道题都刷掉 5:优先解决设计算法思想的题目类别,其次 ...

  5. spring的事件

    理论 异步的实现方式可以使用事件,或者异步执行: spring中自带了事件的支持,核心是ApplicationEventPublisher; 事件包括三个要点: 事件的定义: 事件监听的定义: 发布事 ...

  6. nodejs环境下的socket通信

    结构: socket是应用层和传输层的桥梁.(传输层之上的协议所涉及的数据都是在本机处理的,并没进入网络中) 涉及数据: socket所涉及的数据是报文,是明文. 作用: 建立长久链接,供网络上的两个 ...

  7. 【转】linux下使用sqlplus执行包含语句块的sql文件，运行时会不断显示行号，而在plsqldev中能执行

    一.数据库:Oracle数据库 二.sql文件内容: --创建函数 CREATE OR REPLACE function fun_createuid1 return varchar2 is Resul ...

  8. mosquitto配置文件

    #配置文件为mosquitto #参见mosquitto.conf(5)了解更多信息. #显示默认值,取消注释以更改. #使用#字符来表示注释,但只有当它是 #第一个字符就行了. #========= ...

  9. Drools规则引擎-如果Fact对象参数为null如何处理

    问题场景 在技术交流群(QQ:715840230)中有同学提出这样的问题: 往kiesession里面传入fact,如果不做输入检查fact里面有些字段可能是null值.但是如果在外面做输入检查,规则 ...

  10. `protected` vs `private`

    private 标识为 private 的属性为私有属性,不能在除自己外的地方进行访问. protected 标识为 protected 的属性为受保护的属性,与私有属性类似,但还可以在继承类中进行访 ...