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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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实现图片添加水印功能
2014/02/13 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Vue指令指令大全
2019/02/09 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python利用正则表达式提取字符串
2016/12/08 Python
python 网络编程详解及简单实例
2017/04/25 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python画图高斯分布的示例
2019/07/10 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python如何实现动态数组
2019/11/02 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
《三个小伙伴》教学反思
2014/04/11 职场文书
职业规划实施方案
2014/06/10 职场文书
校园运动会广播稿
2014/10/06 职场文书
大学生英文求职信范文
2015/03/19 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
大学生村官入党自传
2015/06/26 职场文书
小学生暑假安全公约
2015/07/14 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
python库sklearn常用操作
2021/08/23 Python