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. Javascript是如何工作的？

    作为一个前端开发者或者全栈开发者,一定非常熟练Javascript.程序员社区Stack Overflow的调查结果显示,Javascript是最常用的编程语言,连续多年排在第一名.发明Javascr ...

  2. 史上最全的用Python操控手机APP攻略！建议收藏！

    ​最近经常看到用Python操作手机APP的项目,例如抖音.闲鱼之类的,看完后发现这些项目无一例外需要部署ADB环境.至于什么是ADB,很多大神都讲过,只是写得比较专业,我等菜鸟看完还是云里雾里. ​ ...

  3. C语言程序设计100例之（1）：鸡兔同笼

    例1   鸡兔同笼 [问题描述] 一个笼子里面关了鸡和兔子(鸡有2 只脚,兔子有4 只脚,没有例外).已知笼子里面脚的总数a,问笼子里面至少有多少只动物,至多有多少只动物? [输入数据] 第1 行是测 ...

  4. Linux vi文档操作

    使用操作 a 在光标后插入    A 插入行末   i 在光标前插入   I 插入行首 o 向下切换一行 O 向上开一行 dd 删除一整行 x 删除光标后一个字符   X 删除光标前一个字符 shif ...

  5. 【洛谷5008】逛庭院（Tarjan，贪心）

    [洛谷5008]逛庭院(Tarjan,贪心) 题面 洛谷 题解 如果图是一个\(DAG\),我们可以任意选择若干个不是入度为\(0\)的点,然后把它们按照拓扑序倒序删掉,不难证明这样一定是合法的. 现 ...

  6. wpf datagrid field to image converter 字段 图片转化器

    <DataGridTemplateColumn Header="Binding"> <DataGridTemplateColumn.CellTemplate> ...

  7. Python爬取6271家死亡公司数据，看十年创业公司消亡史

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 朱小五 凹凸玩数据 PS:如有需要Python学习资料的小伙伴可以加 ...

  8. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  9. 【转载】不可不知的 Android strings.xml 那些事

    相信 strings.xml 已经是大家在 Android 开发中最熟悉的文件之一了,但其实它也有很多需要注意的地方和一些小技巧,知道了这些可以让你的 Android 应用更加规范易用,大家来看看吧. ...

  10. Macbook触控板使用技巧

    1. 在Storyboard鼠标右键可以直接拖线的,如果你用的是外接的第三方鼠标,没必要按着 control 键再用鼠标左键拖线 如果是触控板的话,双指按下去就可以直接拖线,带3Dtouch功能的触控 ...