vue.js提交按钮时简单的if判断表达式示例

简介: vue.js提交按钮时简单的if判断表达式示例

简单的业务需求如下,看图说话

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

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

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

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

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

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>
相关文章
|
1月前
|
JavaScript
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
49 0
|
4月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 表达式与运算符
JavaScript中的表达式和运算符是构建逻辑、进行计算的基础。本文将深入研究JavaScript中各类表达式,包括算术表达式、关系表达式、逻辑表达式,以及运算符的使用方法,并通过丰富的示例代码来帮助读者更全面地了解和运用这些概念。
|
4月前
|
JavaScript 前端开发
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
|
1月前
|
JavaScript
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
12 3
|
1月前
|
JavaScript
js开发:请解释什么是ES6的默认参数(default parameters),并给出一个示例。
ES6允许在函数参数中设置默认值,如`function greet(name = &#39;World&#39;) {...}`。当调用函数不传入`name`参数时,它将默认为&#39;World&#39;,提升代码简洁性和可读性。例如:`greet()`输出&quot;Hello, World!&quot;,`greet(&#39;Alice&#39;)`输出&quot;Hello, Alice!&quot;。
16 4
|
1月前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
18 6
|
1月前
|
JavaScript 前端开发
js开发:请解释什么是事件委托(event delegation),并给出一个示例。
事件委托是JavaScript中优化事件处理的技术,通过绑定事件处理器到共享的父元素,利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件,然后通过`event.target`识别触发事件的具体子元素(如`&lt;li&gt;`),实现对动态生成列表项的点击事件处理。
|
1月前
|
JavaScript 数据可视化 定位技术
vue项目中mapboxgl的几个经典操作代码示例
vue项目中mapboxgl的几个经典操作代码示例
30 0
|
1月前
|
存储 JavaScript 定位技术
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
38 0
|
1月前
|
存储 监控 JavaScript
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)