vue 实现表单下拉框 --- 并且获取其中的值

说明

使用到了 v-model 指令

开始使用

获取下拉表单中的值

• 原理就是直接绑定 type 里面的值利用双向绑定的原理实现

    <div id="app">
    
        <select v-model="type">      //框里面的值会随着 type 值的变化而变化（关键）
            <option value="1">一---1</option>
            <option value="2">二---2</option>
            <option value="3">三---3</option>   
        </select>
        <div>打印结果：{{type}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                type:'2'
            },
        })

    </script>

---

修改下拉表单中的值

• 原理就是直接修改 data 数据里面对应的数据就可以了
• 当然你不一定要通过这个方法修改，这只是展示其中原理

    <div id="app">
        <input type="text" v-model="type"> //在这里进行数据的修改（唯一新增的代码）
        <select v-model="type" name="" id="">
            <option value="1">一---1</option>
            <option value="2">二---2</option>
            <option value="3">三---3</option>
        </select>
        <div>打印结果：{{type}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                type:'3'
            },
        })

    </script>