Vue.JS入门篇--处理表单

最新推荐文章于 2025-06-09 00:45:00 发布

Ailsa-show

最新推荐文章于 2025-06-09 00:45:00 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/lamenw/article/details/79650217

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个简单的示例介绍了如何使用Vue.js实现表单元素的双向数据绑定，包括文本输入框、复选框、单选按钮、下拉选择框及多选框的数据绑定，并展示了实时更新数据的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> </head>

<body>
    <form id="demo">
        <!-- text -->
        <p>
            <input type="text" v-model="msg"> {{msg}} </p>
        <!-- checkbox -->
        <p>
            <input type="checkbox" v-model="checked"> {{checked ? "yes" : "no"}} </p>
        <!-- radio buttons -->
        <p>
            <input type="radio" name="picked" value="one" v-model="picked">
            <input type="radio" name="picked" value="two" v-model="picked"> {{picked}} </p>
        <!-- select -->
        <p>
            <select v-model="selected">
                <option>one</option>
                <option>two</option>
            </select> {{selected}} </p>
        <!-- multiple select -->
        <p>
            <select v-model="multiSelect" multiple>
                <option>one</option>
                <option>two</option>
                <option>three</option>
            </select> {{multiSelect}} </p>
        <p>
            <pre>data: {{$data | json 2}}</pre>
        </p>
    </form>
    <script> new Vue({ el: '#demo', data: { msg: 'hi!', checked: true, picked: 'one', selected: 'two', multiSelect: ['one', 'three'] } }); </script> </body>

</html>