v-model表单数据双向绑定-表单提交示例

示例如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model表单数据双向绑定title>
head>
<body>
    <div id="app">
        
        <form action="#" @submit.prevent="subForm">
            姓名：
            <input v-model="name" name="name" type="text">
            {{name}}
            <br><br>
            <input v-model="sex" name="sex" type="radio" :value="0">女
            <input v-model="sex" name="sex" type="radio" :value="1">男
            {{sex}}
            <br><br>
            技能
            <input v-model="skill" name="skill" type="checkbox" value="javascript"> javascript
            <input v-model="skill" name="skill" type="checkbox" value="java"> java
            {{skill}}
            <br><br>
            下拉框
            <select name="citys" v-model="citys">
                <option value="bj">北京option>
                <option value="sh">上海option>
                <option value="sz">深圳option>
            select>
            {{citys}}
            <br><br>
            <textarea v-model="remark" name="remark" cols="30" rows="6">textarea>
            {{remark}}
            <br><br>
            <button type="submit">提交button>
        form>
    div>
    <script src="./node_modules/vue/dist/vue.global.js">script>
    <script type="text/javascript">
        const {createApp} = Vue;
        const app=createApp({
            data(){
                return{
                    name:"aaa",
                    sex: 0, //默认选中男
                    skill: ['java'], //默认勾选java
                    citys: 'sh',//默认选中
                    remark: '',//初始化textarea
                }
            },
            methods:{
                subForm(){
                    console.log("提交数据为：",this.name,this.sex,this.skill,this.citys,this.remark)
                }
            }
        }).mount("#app");
        console.log("app",app);
    script>
body>
html>

ps: v-model 绑定一般为 name属性。name 属性可以删除

相关阅读:
Mysql查询分析工具Explain的使用
设计模式——结构性设计模式
matlab将十六进制转换为十进制（hex2dec函数）
android framework之Applicataion启动流程分析（三）
stm32cubemx图形化配置之 FreeRTOS选项中CMSIS_V1和CMSIS_V2的区别
河南共享股东系统开发模式介绍
【余贞侠】- c语言程序设计第二、三章课后习题答案
Git常用命令归纳
2011年408大题总结
HTML5期末大作业：美妆网页主题网站设计——清新的手工肥皂网站展示(4页)HTML+CSS+JavaScript

原文地址：https://blog.csdn.net/QWERTY55555/article/details/133914222