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 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
解除劳动合同协议书
2014/09/17 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
小学生手册家长意见
2015/06/03 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Python自动化实战之接口请求的实现
2022/05/30 Python