vue.js提交按钮时进行简单的if判断表达式详解


Posted in Javascript onAugust 08, 2018

前言

本文主要介绍的是vue.js提交按钮时进行简单的if判断表达式的相关内容,分享出来供大家参考学习,是一个简单的业务需求,下面话不多说了,看图说话

1:当充值金额没有填写的时候,会有Toast小弹框提示“请输入有效的充值金额”

vue.js提交按钮时进行简单的if判断表达式详解

if (!this.money)
    {
     console.log('money',money);
     Toast({
      message: '请输入有效的充值金额',
      duration: 2000
     });
    }

2:当第二个框实收金额没有填写的时候,会有Toast小弹框提示“请输入有效的实付金额”

vue.js提交按钮时进行简单的if判断表达式详解

else if (!this.moneyReal)
    {
     console.log('moneyReal',moneyReal);
     Toast({
      message: '请输入有效的实付金额',
      duration: 2000
     });
    }

3:当两个输入框都填写的时候,会弹出一个MessageBox询问框

vue.js提交按钮时进行简单的if判断表达式详解

else
    {
     MessageBox.confirm('你确定要充值么?', '提示').then(action => {
     });
    }

具体demo如下

<template>
 <div class="app">

  <mt-field label="充值金额" id="money" placeholder="请输入" v-model="money" type="number"></mt-field>
  <mt-field label="实收金额" id="moneyReal" placeholder="请输入" v-model="moneyReal" type="number"></mt-field>
  <div class="rechage">
   <button @click="chongZhiForMember">充 值</button>
  </div>
 </div>
</template>

<script>
 import { Field, MessageBox, Toast } from 'mint-ui';
 export default {
  data() {
   return {

    // 会员卡余额
   }
  },
  methods: {

   chongZhiForMember() {
    if(!this.money) {
     console.log('money', money);
     Toast({
      message: '请输入有效的充值金额',
      duration: 2000
     });
    } else if(!this.moneyReal) {
     console.log('moneyReal', moneyReal);
     Toast({
      message: '请输入有效的实付金额',
      duration: 2000
     });
    } else {
     MessageBox.confirm('你确定要充值么?', '提示').then(action => {

     });
    }
   }
  },

 }
</script>
<style scoped>
 .app {
  background: #F1F1F1;
  height: 17.78rem;
 }
 
 .rechage button {
  outline: none;
  border: none;
  height: 1rem;
  width: 3.5rem;
  font-size: 0.5rem;
  color: white;
  background: #449EF4;
  border-radius: 0.15rem;
 }
 
 .rechage {
  text-align: center;
  margin-top: 1rem
 }
</style>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
$()JS小技巧
Jul 21 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
javascript 用函数实现继承详解
May 28 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
微信小程序用户授权最佳实践指南
May 08 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 #Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
JavaScript中arguments和this对象用法分析
Aug 08 #Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 #Javascript
微信小程序开发背景图显示功能
Aug 08 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
php操作mysqli(示例代码)
2013/10/28 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
numpy返回array中元素的index方法
2018/06/27 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python mysql断开重连的实现方法
2019/07/26 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python页面加载的等待方式总结
2021/02/28 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
机关作风建设整改方案
2014/10/27 职场文书
导游词400字
2015/02/13 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
繁星春水读书笔记
2015/06/30 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫