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

表单控件一般多用于页面交互或数据录入，可以说是很常用的东西了，Vue提供了v-model 指令，用于表单元素的双向绑定数据需要注意的是，使用v-model后，表单控件只会关注绑定的数据，对于input的value值或 textarea 中间的值都不会再生效&lt;body&gt;&lt;div id="v1"&a

freedom_文

4143人浏览 · 2018-10-20 17:03:28

freedom_文 · 2018-10-20 17:03:28 发布

这里写图片描述

表单控件一般多用于页面交互或数据录入，可以说是很常用的东西了，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>

这里写图片描述

单选按钮 :


<div id="v1">

    <!--单选按钮在只有一个的情况下，可以使用v-bind (简写：) 来设置：-->

    <div>
        <label>
            <input type="radio" :checked="only"> only为true时选中
        </label>
    </div>

    <br><br>

    <!--多个单选按钮需要v-model 和 value 配合使用,当value值与数据的相同部分则被选中-->

    <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>

复选按钮 :



<div id="v1">
    
    <!--复选框跟单选框的用法差不多，不过在复选框只有一个的情况下也是用v-model设置的-->
    
    <label>
        <input type="checkbox" v-model="only">
    </label>

    <br><br>

    <label>
        <input type="checkbox" v-model="more" value="1">
    </label>

    <label>
        <input type="checkbox" v-model="more" value="2">
    </label>

    <label>
        <input type="checkbox" v-model="more">
    </label>
</div>

<script src="vue.min.js"></script>
<script>

    var app=new Vue({
        el:"#v1",
        data:{
            only:true,
            sel:"eee",
            more:[1,2,3]
        }
    })
</script>

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