说明:“标签值”指<option></option>标签之间的值,例如<option>Hello</option>,标签值为“Hello”。
key属性用于区别不同的<option>,多个key值不能重复,通常取Id作为key值。
value属性是选中某一项之后,<select>控件的返回值,通常也取Id作为value的值。如果没有给定标签值,那么下拉备选项就是value;如果给定了标签值,下拉备选项就是标签值。实例如下:
实例1:没有标签值,下拉框就以value值作为备选项。select返回值是选中的那个value值。(value值为Id)
<pre>
{{searchMessage.projectId}}
</pre>
<div>
<b>项目:</b>
<Select v-model="searchMessage.projectId">
<Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId"></Option>
</Select>
</div>
运行效果:
实例2:没有标签值,下拉框就以value值作为备选项。select返回值是选中的那个value值。(value值为Name)
<pre>
{{searchMessage.projectId}}
</pre>
<div>
<b>项目:</b>
<Select v-model="searchMessage.projectId">
<Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectName"></Option>
</Select>
</div>
运行效果:
实例3:有标签值(标签值为Name),下拉框就以标签值作为备选项。select返回值是选中的那个value值。(value值为Id)
<pre>
{{searchMessage.projectId}}
</pre>
<div>
<b>项目:</b>
<Select v-model="searchMessage.projectId">
<Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId">{{project.projectName}}</Option>
</Select>
</div>
运行效果:
总结:
实际情况中通常使用第三个实例。因为,首先,首先,首先(最强硬的需求),我们希望select控件返回Id,因此value值写Id。同时,希望下拉框在UI显示上用Name(汉字),因此需要给定标签值,标签值为汉字。(若不给定标签值,就会使用value值做备选项,但用ID做value值是最强硬的需求)