<p v-if="weather=='sun'">去公园</p>
    <p v-else-if="weather=='s'">去厕所</p>
    <p v-else>哪都不去</p>
 
 

template模板

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <script src='https://unpkg.com/vue/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
    <!-- <p v-if="weather=='sun'">去公园</p>
    <p v-else-if="weather=='s'">去厕所</p>
    <p v-else>哪都不去</p> -->
<!--
    <template v-if="age==18">
      <p>数学</p>
      <p>语文</p></p>
    </template>
    <template v-else-if="age>18&&age<25">
      <p>处对象</p>
      <p>买房子</p></p>
    </template>
    <template v-else>
      <p>打工人</p>
      <p>买房子</p></p>
 
    </template> -->
    <template v-if="loginType=='username'">
      <label>用户名：</label>  
      <input type="text" name="username" placeholder="请输入用户名">
    </template>
    <template v-else-if="loginType=='email'">
      <label>邮箱：</label>
      <input type="text" name="email" placeholder="请输入邮箱">
    </template>
    <button @click="changeLoginType">更换登录方式</button>
</div>
 <script>
    new Vue({
      el:'#app',
      data:{
        weather:"sun",
        age:24,
        loginType:"username",
},
    methods:{
      changeLoginType(){
        this.loginType=this.loginType=='username'?'email':'username'
      }
    }
    }
)
</script>
</body>
</html>

vue学习6-if判断的更多相关文章

  1. 12.2 VUE学习之-if判断,实践加减input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  3. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  5. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  6. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  10. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

随机推荐

  1. git提交忽略文件.gitignore内容

    ###################################################################### # Build Tools .gradle /build/ ...

  2. 【LeetCode】146. LRU Cache 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典+双向链表 日期 题目地址:https://le ...

  3. 【授课录屏】JavaScript高级（IIFE、js中的作用域、闭包、回调函数和递归等）、MySQL入门（单表查询和多表联查）、React（hooks、json-server等） 【可以收藏】

    一.JavaScript授课视频(适合有JS基础的) 1.IIFE 2.js中的作用域 3.闭包 4.表达式形式函数 5.回调函数和递归 资源地址:链接:https://pan.baidu.com/s ...

  4. Understanding Black-box Predictions via Influence Functions

    目录 概 主要内容 样本重要性分析 样本摄动对损失的影响 高效计算 共轭梯度 随机估计 一些应用 附录 (1)的证明 Koh P W, Liang P. Understanding black-box ...

  5. Jmeter性能测试场景的创建和运行

    目录 性能测试场景的分析 项目背景 Jmeter指标 性能测试场景的设计以及准备 性能测试的总结 性能测试场景的分析 项目背景 ​ 实际工作中,我们拿到一个项目一般来说都会是项目经理说XXX来进行一下 ...

  6. 编写Java程序_银行终端服务系统

    目录 一.General description 总体概述 二.About the Project 项目介绍 三.Soft function 软件功能 四.UI Model Use Case Diag ...

  7. 编写Java程序，实现对兵营类的封装，将兵营类中的所有属性设置为私有访问权限，方法设置为公有访问权限

    返回本章节 返回作业目录 需求说明: 实现对兵营类的封装 将兵营类中的所有属性设置为私有访问权限. 将兵营类中所有属性的赋值方法设置为公有访问权限. 要求兵营名称的长度在4-8位之间. 要求兵营士兵的 ...

  8. 「超市管理系统——商品管理」 · Java Swing + MySQL JDBC开发

    项目下载:https://download.csdn.net/download/weixin_44893902/13715024 1.9元付费赞助下载:https://download.csdn.ne ...

  9. 『无为则无心』Python函数 — 30、Python变量的作用域

    目录 1.作用于的概念 2.局部变量 3.全局变量 4.变量的查找 5.作用域中可变数据类型变量 6.多函数程序执行流程 1.作用于的概念 变量作用域指的是变量生效的范围,在Python中一共有两种作 ...

  10. Laravel Redis分布式锁的使用

    创建锁 use Illuminate\Support\Facades\Cache; $lock = Cache::lock('foo', 10); if ($lock->get()) { // ...