vue表单输入绑定(实例)

最新推荐文章于 2023-04-09 21:36:31 发布

虽千万人吾往矣

最新推荐文章于 2023-04-09 21:36:31 发布

阅读量185

点赞数 1

分类专栏： vue 文章标签： vue checkbox

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107588838

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

使用v-model(双向数据绑定)自动收集数据text/textarea、checkbox、radio
、select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>

<div id="demo">
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名: </span>
        <input type="text" v-model="username"><br>

        <span>密码: </span>
        <input type="password" v-model="pwd"><br>

        <span>性别: </span>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label><br>

        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="likes">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
        <label for="pingpang">乒乓</label><br>

        <span>城市: </span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
        </select><br>
        <span>介绍: </span>
        <textarea rows="10" v-model="info"></textarea><br><br>

        <input type="submit" value="注册">
    </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            username: '',
            pwd: '',
            sex: '男',
            likes: ['foot'],
            allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
            cityId: '2',
            info: ''
        },
        methods: {
            handleSubmit () {
                console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
                alert('提交注册的ajax请求')
            }
        }
    })
</script>
</body>
</html>

虽千万人吾往矣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue表单输入绑定(实例)

使用v-model(双向数据绑定)自动收集数据text/textarea、checkbox、radio、select<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单输入绑定</title></head><body><div id="demo"> <form acti
复制链接

扫一扫

专栏目录