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

最新推荐文章于 2024-05-19 20:18:26 发布

白沙王

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量51

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50784508/article/details/133313087

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="VUE/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>学习网</div>
        姓名：<input type="text" v-model="username" /><br />
        是否单身：<input type="checkbox" v-model="isSingle" /><br />
        <!--name:给单选框加上相同的name属性可以分组，同一组相互排斥-->
        <!--value:给单选框加上value属性，用于提交给后台的数据-->
        性别：    
        <!--v-model="gender"的值与value的值关联-->
        <input v-model="gender" type="radio" name="gender" value="1" />男
        <input v-model="gender" type="radio" name="gender" value="2" />女<br />

        <!--option需要设置value值，提交给后台-->
        <!--select的value值关联了选中的option的value值-->
        所在城市：<select v-model="citly">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">广东</option>
            <option value="104">成都</option>
        </select><br />
        自我描述：<br />
        <textarea v-model="desc" cols="20" rows="10"></textarea><br />
        <button>立即注册</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                username: "",
                isSingle: true,
                gender: "1",
                citly: "104",
                desc:"洗刷刷真棒棒"
            }
        })
    </script>
</body>
</html>