Vue2中的v-model的表单元素绑定-CSDN博客

本文链接：https://blog.csdn.net/m0_56698546/article/details/140464818

v-model应用于表单元素

常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值

它会根据控件的类型自动选择正确的方法来更新元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <div id="app">
        <h3>小白痴网</h3>

        <form action="">
            姓名: <input v-model="username" type="text"><br><br>

            是否单身: <input type="checkbox" v-model="isSingle"><br><br>

            性别: <input v-model="sex" type="radio" name="sex" value="1"> 男 <input v-model="sex" type="radio" name="sex" value="2"> 女 <br><br>

            城市: <select v-model="cityID" name="" id="">
                <option  value="00">广州</option>
                <option  value="01">北京</option>
                <option  value="10">上海</option>
                <option  value="11">深圳</option>
            </select>
            <br><br>

            自我描述：<br><br>
            <textarea v-model="text" name="" id=""></textarea><br><br>


            <input type="button" value="立刻注册">

        </form>

    </div>

    <!-- 引入是开发版本的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>


    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username:'',
                isSingle:false,
                sex:"1",
                cityID:"00",
                text:""
            },
            methods: {

            },
        })
    </script>
</body>

</html>