Vue框架整理：表单控件：input 、select设置

偏执的太偏执、 2022-05-22 05:19 255阅读 0赞

![这里写图片描述][70]

#### 表单控件一般多用于页面交互或数据录入，可以说是很常用的东西了，Vue提供了v-model 指令，用于表单元素的双向绑定数据 ####

需要注意的是，使用v-model后，表单控件只会关注绑定的数据，对于input的value值 或 textarea 中间的值都不会再生效

<body> <div id="v1"> <input type="text" v-model="message"> <p>输入内容: { { message }}</p> </div> <script src="vue.min.js"></script> <script> var app=new Vue({ el:"#v1", data:{ message:"" } }) </script> </body>

![这里写图片描述][70 1]

--------------------

### 单选按钮 : ###

<div id="v1">
    
        
    
        <div>
            <label>
                <input type="radio" :checked="only"> only为true时选中
            </label>
        </div>
    
        <br><br>
    
        
    
        <div>
            <label>
                <input type="radio" v-model="sel" value="vvv"> vvv
            </label>
    
            <label>
                <input type="radio" v-model="sel" value="uuu"> uuu
            </label>
    
            <label>
                <input type="radio" v-model="sel" value="eee"> eee
            </label>
    
        </div>
    
    
    
    </div>
    
    <script src="vue.min.js"></script>
    <script> var app=new Vue({ el:"#v1", data:{ only:true, sel:"eee" } }) </script>

--------------------

### 复选按钮 : ###

--------------------

![这里写图片描述][70]

### 下拉列表 select ###

如果Option中有value值，v-model会优先匹配value，没有value 的情况下就会直接去找text  
需要注意一下，这里说的没有value,指的是没有option 中 没有 value这个属性

<option value="">vue</option>

正确用法：

效果图：

![这里写图片描述][70 2]

--------------------

### select 多选 ###

在select标签上加一个multiple 就OK了

![这里写图片描述][70 3]

--------------------

### 循环添加option ###

其实select在项目中比较常用的是动态循环出来的使用的

<div id="v1"> <select v-model="sel"> <option v-for="option in val" :value="option.id">{ { option.name }}</option> </select> </div> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#v1", data:{ sel:"1", //默认选中值 val:[ {name:"jerry",id:1}, {name:"honey",id:2}, {name:"lyn",id:3} ] } }) </script>

[70]: /images/20220522/7c65e680153b40029266eb4b7a9f395e.png
[70 1]: /images/20220522/e6e3ea6845374a6c8ab8cb69f42f0ca6.png
[70 2]: /images/20220522/b97a3d60415445abb4e04bbf4c29f0a8.png
[70 3]: /images/20220522/f95558901a5a4ac4aed2053c3f6e1ce1.png