前言

源于一次群里，群友斌哥提出的问题，不知道为啥他不想用if-else了，然后我们开始给他出主意。

聊天截图

要实现什么样的功能？

从上图看，是我点击了b然后在b中执行了a 如果a返回false则b调用a后面的数据就不在执行了，那么在我看来直接就使用if解决了

如下面代码

<template>
	<view class="container">
    	<button type="default" @click="b">干了</button>
    </view>
</template>

export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false
        },
        b(){
        if(this.a()){   //这里的if是斌哥不想要的
        this.a();
            console.log('我是b')
        }
        	
        }
    }

}

但是斌哥提出不想用if,那么我们还可以使用，什么方法呢，我给出的解决方法是用 && 符号

解决方法

使用&&符号，以下可以改写下

原理：a&& b :如果执行a后返回true，则执行b并返回b的值；如果执行a后返回false，则整个表达式返回a的值，b不执行；

<template>
	<view class="container">
    	<button type="default" @click="b">干了</button>
    </view>
</template>

export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false;
        },
        b(){
     	 this.a() && console.log('我是b');
        }
    }

}

但是斌哥又说不好看，我想都那么简洁了 还怎么不好看了 ！！！！

这是斌哥发出了他的代码

看了下，斌哥嫌长了影响阅读，我回说你加注释不久行了，我想了下其实还是可以再改写下，本质不就是再短点吗

<template>
	<view class="container">
    	<-- 这里执行的b改为了c-->
    	<button type="default" @click="c">干了</button> 
    </view>
</template>


export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false;
        },
        b(){
     		this.model().then((res)=>{
              this.api()
            })
        },
        c(){
        // 这样不就短了吗
         this.a() && this.b();
        }
    }

}

使用三元运算符

直接上代码

<template>
	<view class="container">
    	<-- 这里执行的b改为了c-->
    	<button type="default" @click="c">干了</button> 
    </view>
</template>


export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false;
        },
        b(){
     		this.model().then((res)=>{
              this.api()
            })
        },
        c(){
        // 这样不就短了吗
         this.a()?this.b():console.log("我结束了");
        }
    }

}

使用switch

<template>
	<view class="container">
    	<-- 这里执行的b改为了c-->
    	<button type="default" @click="c">干了</button> 
    </view>
</template>


export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false;
        },
        b(){
     		this.model().then((res)=>{
              this.api()
            })
        },
        c(){
        // 这样不就短了吗
        let result = this.a();
        switch(result):{
        	case true:
            	this.b()
            	break;
            case false:
            	console.log("做个错误记录吧")
            	break;
            default:
            console.log("拜拜")
        }
         this.a()?this.b():console.log("我结束了");
        }
    }

}

使用||符号好像也可以

原理：a || b :如果执行a后返回true，则整个表达式返回a的值，b不执行；如果执行a后返回false，则继续执行b并返回b的值；

代码改写如下

<template>
	<view class="container">
    	<-- 这里执行的b改为了c-->
    	<button type="default" @click="c">干了</button> 
    </view>
</template>


export default {
	data(){
    	return {
        }
    },
    methods:{
    	a(){
        	return false;
        },
        b(){
     		this.model().then((res)=>{
              this.api()
            })
        },
        c(){
        // 这样不就短了吗
         !this.a() || this.b();
        }
    }

}