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

最新推荐文章于 2024-07-01 08:00:00 发布

freedom_文

最新推荐文章于 2024-07-01 08:00:00 发布

阅读量4.1k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/freedomVenly/article/details/80685776

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这里写图片描述

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

freedom_文

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue框架整理：五、表单控件：input输入，单选、多选设置

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

扫一扫

专栏目录