Vue下拉选择选中原来的数据

在编辑信息的时候，进入编辑页面所有数据应该都是数据库中的，有的数据是通过下拉框选择的，那这时候怎么选择数据库中的那个数呢，使用Vue.js编写代码的时候，可以使用v-model进行表单输入绑定。示例代码如下：<select class="select" name="peopleNum" id="peopleNum" size

飞鸿先森

4030人浏览 · 2018-03-16 20:18:45

飞鸿先森 · 2018-03-16 20:18:45 发布

在编辑信息的时候，进入编辑页面所有数据应该都是数据库中的，有的数据是通过下拉框选择的，那这时候怎么选择数据库中的那个数呢，使用Vue.js编写代码的时候，可以使用v-model进行表单输入绑定。示例代码如下：

<select class="select" name="peopleNum" id="peopleNum" size="1" v-model="peopleNum">
    <option value="50人以下">50人以下</option>
    <option value="50-100人">50-100人</option>
    <option value="100-200人">100-200人</option>
    <option value="200-300人">200-300人</option>
    <option value="300-400人">300-400人</option>
    <option value="400-500人">400-500人</option>
    <option value="500-1000人">500-1000人</option>
    <option value="1000-2000人">1000-2000人</option>
    <option value="2000人以上">2000人以上</option>
</select>

其中peopleNum就是原始数据库中的数据，根据数据自动选择到下拉选项，更多介绍，请点击下方链接：

https://cn.vuejs.org/v2/guide/forms.html#选择框

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^