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. php array()和[]

    比较数组 array() 和 [] 执行结果:(其中之一) array() : 执行时间在0.015-0.55之间 [] : 执行时间在0.015-0.35之间 结论: []执行时间更少更稳定

  2. 大话设计模式Python实现-解释器模式

    解释器模式(Interpreter Pattern):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 下面是一个解释器模式的demo: #!/usr/ ...

  3. 【Linux命令】id，usermod用户管理命令（包括/etc/passwd、shadow、group、gshadow文件）

    一.id命令 可以用来查看用户的UID.GID和附加组信息 id会显示用户以及所属群组的实际与有效ID.若两个ID相同,则仅显示实际ID.若仅指定用户名称,则显示目前用户的ID. 1.格式 id [O ...

  4. VSCode中代码在浏览器中打开及实时刷新

    实时刷新方法一: 在项目目录下运行命令: browser-sync start --server --files "**/*.css,**/*.html,**/*.js" 实施刷新 ...

  5. Django中的response

    render_to_response render_to_response('index.html', locals(),context_instance=RequestContext(request ...

  6. C# 通过反射调用 Func 委托

    C# 通过反射调用 Func 委托 Intro 最近我的 NPOI 扩展库增加了,自定义输出的功能,可以自定义一个 Func 委托来设置要导出的内容,详细介绍请查看 https://www.cnblo ...

  7. java基础(17):包装类、System、Math、Arrays、大数据运算

    1. 基本类型包装类 大家回想下,在第三篇文章中我们学习Java中的基本数据类型时,说Java中有8种基本的数据类型,可是这些数据是基本数据,想对其进行复杂操作,变的很难.怎么办呢? 1.1 基本类型 ...

  8. 读取树莓派4B处理器(CPU)的实时温度

    读取树莓派4B处理器(CPU)的实时温度 树莓派发布4B后,性能提升了不少,但是温度也是高的不行,所以最好配置一个小风扇和散热片还是比较好的 俩种办法都可以实现 1.Shell命令读取 打开终端 cd ...

  9. css布局技巧

    CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...

  10. layui 学习笔记一：layui table 查询、新增、编辑、删除

    一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...