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 相关文章推荐
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
自动跳转中英文页面
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python迭代器常见用法实例分析
2019/11/22 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
介绍一下#error预处理
2015/09/25 面试题
深圳-东方伟业笔试部分
2015/02/11 面试题
市场营销管理制度
2014/01/29 职场文书
学生自我评价范文
2014/02/02 职场文书
文字自荐书范文
2014/02/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python