Vue的表单组件之下拉框

今天药忘吃喽~ 2023-10-18 08:59 8阅读 0赞

下拉框分为单选和多选两种方式。

<div id="app">
      <select v-model="selected">
       <option value="读书">读书</option>
       <option value="学习">学习</option>
       <option value="运动">运动</option>
      </select>
      <p>选择的项是：{
       {selected}}</p>
     </div>
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     new Vue({
      el:'#app',
      data:{
       selected:'学习'
      }
     })
    </script>

![Image 1][]

![70][]

<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配<option>的text。

给<selected>添加属性multiple就可以多选了，此时model绑定的是一个数组。

<div id="app">
      <select v-model="selected" multiple>
       <option value="读书">读书</option>
       <option value="学习">学习</option>
       <option value="运动">运动</option>
      </select>
      <p>选择的项是：{
       {selected}}</p>
     </div>
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     new Vue({
      el:'#app',
      data:{
       selected:['学习','读书']
      }
     })
    </script>

![70 1][]

在业务中，<option>通常是使用v-for动态输出，value和text也是用v-bind来动态输出的,例如:

<div id="app">
      <select v-model="selected" >
       <option v-for="option in options" :value="option.value">{
       {option.text}}</option>
      </select>
      <p>选择的项是：{
       {selected}}</p>
     </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     new Vue({
      el:'#app',
      data:{
       selected:'学习',
       options:[
        {
         text:'学习',
         value:'学习'
        },
        {
         text:'读书',
         value:'读书'
        },
        {
         text:'运动',
         value:'运动'
        }
       ]
      }
     })
    </script>

[Image 1]: 
[70]: https://img-blog.csdn.net/20180919204943313?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180919205007166?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70