Vue.js入门学习--选择菜单select的绑定（七）

完整demoselect选择标签v-model绑定请选择你想去的城市巴黎洛杉矶信阳你的选择是：{{selectedCity}}

appleyk

11295人浏览 · 2018-02-01 15:02:19

appleyk · 2018-02-01 15:02:19 发布

完整demo

<html>

<head>
    <title>select选择标签v-model绑定</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app1">
        <!-- 单选 select（结果绑定到一个字符串） -->
        <select v-model="selectedCity">
            <option disabled value=''>请选择你想去的城市</option>
            <option>巴黎</option>
            <option>洛杉矶</option>
            <option>信阳</option>
        </select>
        <span>你的选择是：{{selectedCity}}</span>
        <br/>
        <br/>
        <!-- 多选 select（结果绑定到一个数组） -->
        <select v-model="selectedFood" multiple>
            <option disabled value=''>请选择你想吃的食物(多选)</option>
            <option>香肠</option>
            <option>牛排</option>
            <option>冰激凌</option>
        </select>
        <span>你的选择是：{{selectedFood}}</span>
        <br/>
        <br/>
        <!-- 使用 v-for 动态渲染 option animals为一个数组，其元素是一个键值对的list-->
        <!-- 单选 select（结果绑定到一个字符串,值取value的结果） -->
        <select v-model="selected">
            <option disabled value=''>请选择你要翻译的动物单词</option>
            <option v-for="animal in animals" :value="animal.value">{{animal.name}}</option>
        </select>
        <span>翻译：{{selected}}</span>
    </div>
</body>
<script>
    new Vue({
        el: '#app1',
        data: {
            selected: '',
            selectedCity: '',
            selectedFood: [],
            animals: [{
                    name: "Dog",
                    value: "狗"
                },
                {
                    name: "Cat",
                    value: "猫"
                },
                {
                    name: "Sheep",
                    value: "羊"
                }

            ]
        }
    })
</script>

</html>

一、单选 select（结果绑定到一个字符串）

（1）DOM

（2）数据绑定、模板或者渲染

二、多选 select（结果绑定到一个数组）

（1）DOM

（2）数据模板

三、单选 select选项结果绑定到一个字符串+ v-for指令动态渲染option选项标签

（1）DOM

（2）数据渲染

四、效果演示

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}$/, //不连续的两位字母// /^