从项目中看逻辑运算符“||”和“&&”
今天,在项目开发中遇到一个问题,就这个问题本身而言,并不是很难,但觉得它的意义重大(哈哈,当然是对我而言),还是决定记录一番
问题描述及初步解决
简单描述下要求:就是上边有两个checkbox的选择框(上面的图是简易版),要实现的功能就是二者至少选择一个,而且交互性良好
先说下我的思路,也是我get到的,这个时候是实现二者至少选其一的功能的,当时我也说不来自己是怎样鬼使神差的写了这样的“hasCheckedOne && !hasCheckedTwo”和“hasCheckedTwo && !hasCheckedOne”,当然我指的是变量的位置,也许到这里你也没发现什么问题,那么请继续往下看
<input type="checkbox" :checked="hasCheckedOne" @change="changeCheckedOne" :disabled="hasCheckedOne && !hasCheckedTwo">
<input type="checkbox" :checked="hasCheckedTwo" @change="changeCheckedTwo" :disabled="hasCheckedTwo && !hasCheckedOne">
new Vue({
......
data: {
hasCheckedOne: true, //是否使用选项一
hasCheckedTwo: true,//是否使用选项二
....
},
......
methods: {
changeCheckedOne:function (ev) {
//做了某些处理
this.hasCheckedOne = !hasCheckedOne;
...
},
changeCheckedTwo:function (ev) {
//做了某些处理
this.hasCheckedTwo = !hasCheckedTwo;
...
}
}
})
需求更改
当后台要求这个字段必须为number值得时候,该怎么办呢?(下面的js代码)
v-model其实双向绑定的都为字符串(因为牵扯到form表单,所以用了v-model)
我将hasCheckedOne、hasCheckedTwo都写成了number类型的,然后发现出错了,当取消其中一个的时候,想再次勾选它,它是不可勾选的,也就是disabled的,然后就开始苦逼的找问题出在哪里了,总觉得哪里都似乎对着……
new Vue({
......
data: {
hasCheckedOne: 1, //是否使用选项一 1是 0否
hasCheckedTwo: 1,//是否使用选项二
....
},
......
methods: {
changeCheckedOne:function (ev) {
//做了某些处理
this.hasCheckedOne = ev.target.checked ? 1 : 0;
...
},
changeCheckedTwo:function (ev) {
//做了某些处理
this.hasCheckedTwo = ev.target.checked ? 1 : 0;
...
}
}
})
寻找答案
之后,修改成下面这样,忽然发现,咦啊,对了呢?那么问题出在哪里了呢?
<input type="checkbox" :checked="hasCheckedOne" @change="changeCheckedOne" :disabled="hasCheckedOne==1 && hasCheckedTwo==0">
<input type="checkbox" :checked="hasCheckedTwo" @change="changeCheckedTwo" :disabled="hasCheckedTwo==1 && hasCheckedOne==0">
嗯,问题出在了 “&&”运算符上了,这个是JavaScript与其他语言很不同的地方——逻辑运算符,逻辑运算符所做的工作不是返回true或者false,而是做的是取值运算
||和&&首先会对第一个操作数进行条件判断,如果其不是布尔值,会先将其进行强制类型转换,然后再执行条件判断,对于||来说,如果条件判断结果为true的话,就返回第一个操作数的值,否则返回第二个操作数的值;对于&&来说,如果判断结果为true的话,就返回第二个操作数的值,如果为false的话就返回第一个操作数的值
哈哈,问题才真是有了答案了
这个东西确实很容易被忽视,希望看到这篇文章的你在以后的开发中可以注意一下 ^_^