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. 如何将Excel表批量赋值到ArcGIS属性表

    情景再现 现需要将Excel表信息批量赋值(不是挂接)到Shp文件的属性表,两张表的字段.记录数一模一样,至于为什么会出现这样的问题,咱也不敢问,只有想个法子把它搞定! 原始的Excel信息表共57列 ...

  2. Windows下怎么执行shell脚本

    1.在windows下想要执行shell脚本,需要使用到"Git Bash",所以我们需要先安装Git. 2.查看Git环境变量是否配置,没有配置需要配置(我这里安装Git时自动配 ...

  3. 获取Excel工作薄中Sheet页(工作表)名集合

    #region 获取Excel工作薄中Sheet页(工作表)名集合 02./// <summary> 03./// 获取Excel工作薄中Sheet页(工作表)名集合 04./// < ...

  4. wpf source path

    <Image Source="pack://application:,,,/Images/Folder-icon.png"/> <Image Source=&qu ...

  5. go实现整型的二进制转化

    go中已经实现了int->bin的转化函数,我这里只是化过程逻辑的实现,至于原理我就假设大家都知道了 本案例只考虑 int->bin  的转化 包含了正整数,负整数,0 的转化 packa ...

  6. Typescript基础(3)——类

    前言 今天继续typescript的学习,开始ts类的学习. 类 类的实现 在ES6中新增了类的概念.我们先看ES6中类的实现. class Person { constructor(name,age ...

  7. cnblogs停止更新，同步到个人博客！

    cnblogs停止更新,同步到个人博客 https://dengpeng.me/!             个人博客地址: https://dengpeng.me

  8. 从高版本的 SQL Server 向低版本的 SQL Server 转移数据

    1.在源数据库上右键任务,选择生成脚本- 2.在生成脚本的高级选项中,根据数据库的内容,选择相应的选项,主要是红框圈出的部分,最后选择仅架构(若数据库的数据量不大,可以直接导出 架构和数据,在新数据库 ...

  9. Linux（ubuntu）下创建用户没有创建家目录

    添加-m参数即可: sudo useradd -m username #参数-m 自动创建用户的家目录 得解也.本来是会自动创建的,但是如果使用ll命令查看没有被创建的话,则应该使用此命令来创建新用户 ...

  10. 微信小程序访问webservice（wsdl）+ axis2发布服务端(Java)

    0.主要思路:使用axis2发布webservice服务端,微信小程序作为客户端访问.步骤如下: 1.服务端: 首先微信小程序仅支持访问https的url,且必须是已备案域名.因此前期的服务器端工作需 ...