10-v-model应用于其他表单元素

最新推荐文章于 2024-06-14 10:39:01 发布

一个微不足道的bug

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量62

点赞数

分类专栏： Vue学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/m0_58250910/article/details/132246621

版权

Vue学习笔记专栏收录该内容

82 篇文章 2 订阅

订阅专栏

v-model应用于其他表单元素

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

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

输入框 input: text -> value

文本域 textarea -> value

复选框 input: checkbox -> checked

单选框 input: radio -> checked

下拉菜单 select -> value

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

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

<body>


    <div id="app">
        <h3>个人信息</h3>

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

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


        <!-- 
            前置理解:
                1. name: 给单选框加上 name 属性 可以分组 -> 同一组互相会互斥
                2. value: 给单选框加上 value 属性,用于提交给后台的数据
         -->

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


         <!-- 
            前置理解:
                1. option 需要设置value值, 提交给后台
                2. select 的value 值,关联了选中的 option 的 value 值
            结合 Vue 使用 -> v-model
          -->

        所在城市:
        <select v-model="cityId">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">广州</option>
            <option value="104">南京</option>
        </select>
        <br><br>
       
        自我描述:
        <textarea v-model="desc"></textarea>
        <br><br>

        <button>立即注册</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({

            el: '#app',
            data: {
                username:'',
                isSingle:false,
                gender:"1",
                cityId:"102",
                desc:""
            }
        })

    </script>


</body>

</html>