首先,先来科普一下,Javascript的数据类型(六种):
一、数值(number):整数和小数(好比1和3.14)
二、字符串(string):字符组成的文本(好比”Hello World”)
三、布尔值(boolean):true(真)和false(假)两个特定值
四、undefined:表示“未定义”或不存在,即因为目前没有定义,因此此处暂时没有任何值
五、null:表示无值,即此处的值就是“无”的状态
六、对象(object):各类值组成的集合javascript
再来看看数据类型的转换:html
// 数值:转换后仍是原来的值
Number(324) // 324
// 字符串:若是能够被解析为数值,则转换为相应的数值
Number('324') // 324
// 字符串:若是不能够被解析为数值,返回NaN
Number('324abc') // NaN
// 空字符串转为0
Number('') // 0
// 布尔值:true 转成1,false 转成0
Number(true) // 1
Number(false) // 0
// undefined:转成 NaN
Number(undefined) // NaN
// null:转成0
Number(null) // 0前端
Number函数将字符串转为数值,要比parseInt函数严格不少。基本上,只要有一个字符没法转成数值,整个字符串就会被转为NaN。vue
parseInt('42 cats') // 42
Number('42 cats') // NaN
嗯,回归到今天的主题,如今判断一下java
'0' === 0 json
在Chrome里输出的结果是api
'0' === 0 //false框架
由于字符串类型和数值类型永远都不会严格的等于,而若是你输入:函数
'0' == 0this
在Chrome里输出的结果是
'0' == 0 //true
一个字符串为了和一个数字进行比较,必须事先被强制转换为数字,因此'0'==0是相等的。但'0' === 0是不会严格的等于的。
强烈推荐使用严格等于操做符。若是类型须要转换,应该在比较以前显式的转换, 而不是使用语言自己复杂的强制转换规则。
最近在与后台进行数据交互的时候,遇到一个问题,找了好久,期间后台传给个人数据是
"exchangeList":[
{
"id":27,
"userid":"4797877",
"phonenum":"15967122745",
"state":"2",
"createtime":"2017-08-31 19:09:26",
},
]
我前端将数据循环后渲染到页面时使用的vue框架;
假设咱们把变量什么的都定义好了,我须要获取到state的状态;
html
<table class="table table-bordered table-hover text-center" id="tabletList">
<tbody>
<tr v-for="(x, index) in prizeList">
<td v-if=“x.state === 0">
未发放
</td>
<td v-else-if="x.state === 1 ">
发放中
</td>
<td v-else>
已发放
</td>
<td>
<a href="javascript:;" @click="modify(index)" class="curEdit">修改</a>
</td>
</tr>
</tbody>
</table>
弹窗的内容
<!-- 修改弹框 -->
<sweet-modal ref="dialog" class="dialog">
<h3>修改获品状态</h3>
<table class="editTd">
<tbody>
<tr>
<td>奖品id</td>
<td>
<input readonly="readonly" v-model="current.id" type="text" class="form-control iptText" >
</td>
</tr>
<tr>
<td>发放状态:</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" 'index' === current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>
</tbody>
</table>
<button @click="cancel" type="button" class="btn btn-default">取消</button>
<button @click="submit" type="button" class="btn btn-danger">肯定</button>
</sweet-modal>
js
modify(i) {//点击修改 弹框显示当前列表的信息
this.current.id = this.prizeList[i].id
this.current.state = this.prizeList[i].state
this.index = i
this.$refs.dialog.open()
},
submit() {//肯定时提交弹窗
const i = this.index
this.$refs.dialog.close()
api.getUpdateExchange(this.current.id, this.current.state)
.then( res => {
window.opener=alert('修改为功更新成功!')
const item = this.prizeList[this.index]
item.state = this.current.state
item.id = this.current.id
this.$set(this.prizeList, this.index, item)
})
},
如今的问题是点击修改时,弹框里的select的option的值没有显示当前列表里的内容,对于这个问题
首先问题应该出在modify()这个方法里,没有等于当前的状态,那就是没有我在html里写的判断语句,回过头来看看
<tr>
<td>发放状态:</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" index === current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>
这里判断了v-if=" index === current.state" selected,若是当前的index === current.state时才会执行selected
当是后台给个人json数据是{"state":"2",},也就是说state的value中的2是字符串(string)类型,
而我本地判断的时候,index的值时数值类型(Number),那这样那个判断语句是不会执行的。
知道错误以后,我修改了下代码
<tr>
<td>发放状态:</td>
<td>
<select class="form-control" v-model="current.state">
<template v-for="(x,index) in states">
<option :value="index"
v-text="x" v-if=" index == current.state" selected
>
</option>
<option :value="index"
v-text="x" v-else
></option>
</template>
</select>
</td>
</tr>
把‘===’改为了‘==’,在最开始的时候已经说过了,字符串==数值 的时候,在其间字符串必须事先被强制转换为数字,因此‘0’ == 0//true,
本来这样改成以后应该就能实现咱们想要的效果了,可是好像事与愿违。
这样仍是不行那就应该是在一开始初始化的时候的问题了,看看页面的html
<table class="table table-bordered table-hover text-center" id="tabletList"> <tbody> <tr v-for="(x, index) in prizeList"> <td v-if=“x.state === 0"> 未发放 </td> <td v-else-if="x.state === 1 "> 发放中 </td> <td v-else> 已发放 </td> <td> <a href="javascript:;" @click="modify(index)" class="curEdit">修改</a> </td> </tr> </tbody> </table>仍是一样的错,当数据循环出来以后,在以前都知道了state是字符串,而我到html页面中的时候使用的是‘===’(严格等于),那这样就只能把 x.state===1 其中的某一项转成字符串(string)或者数值(Number)类型就OK了。