Vue框架整理：五、表单控件：input输入，单选、多选设置

r囧r小猫 2022-05-22 03:18 355阅读 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]: /images/20220522/1b45b4952dde4e08b4c79b58a16114ad.png
[70 1]: /images/20220522/3f3a29c39fee480ba4a24943ca51c543.png