关于vue的select中option的value为数字类型时的回显问题

Question

关于select的回显问题
当option的value类型为Number时
会有以下情况

          <Select v-model="roleName">
            <Option value=1>哈哈</Option>
            <Option value=0>呵呵</Option>
          </Select>

当设置roleName默认为1时
即在data()中

            roleName: 1
            

想要的结果是

但实际上是

但是用v-for遍历option的value值时确是正常的
如下

          <Select v-model="roleName">
            <Option v-for='item in items' :value='item.value' :key='item.value'>{{item.label}}</Option>
          </Select>

在data()中加入

        items:[
            {
            value:0,
            label:'哈哈'
            },
             {
            value:1,
            label:'呵呵'
            }            
        ],
        roleName:1
        
 

这时候就是回显正常的？我想问这是为什么呢？我知道双向数据绑定，在页面上输入的都是String类型，但是我这个从头到尾设置的都是Number类型啊,我也打印出来看了都是Number，也没有从页面上获取 ，为什么上面那样就不回显，v-for就回显了呢？？请大神帮助解答，万分感谢！！

Answer 1

// 下面value没有冒号，说明是字符串，只要给前面加上冒号就行了
<Select v-model="roleName">
 <Option value=1>哈哈</Option>
 <Option value=0>呵呵</Option>
</Select>


// 这里通过 :value 绑定了为数字
<Select v-model="roleName">
    <Option v-for='item in items' :value='item.value' :key='item.value'>{{item.label}}</Option>
</Select>