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

    示例如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>v-model表单数据双向绑定title>
    7. head>
    8. <body>
    9.     <div id="app">
    10.         
    11.         <form action="#" @submit.prevent="subForm">
    12.             姓名：
    13.             <input v-model="name" name="name" type="text">
    14.             {{name}}
    15.             <br><br>
    16.             <input v-model="sex" name="sex" type="radio" :value="0">女
    17.             <input v-model="sex" name="sex" type="radio" :value="1">男
    18.             {{sex}}
    19.             <br><br>
    20.             技能
    21.             <input v-model="skill" name="skill" type="checkbox" value="javascript"> javascript
    22.             <input v-model="skill" name="skill" type="checkbox" value="java"> java
    23.             {{skill}}
    24.             <br><br>
    25.             下拉框
    26.             <select name="citys" v-model="citys">
    27.                 <option value="bj">北京option>
    28.                 <option value="sh">上海option>
    29.                 <option value="sz">深圳option>
    30.             select>
    31.             {{citys}}
    32.             <br><br>
    33.             <textarea v-model="remark" name="remark" cols="30" rows="6">textarea>
    34.             {{remark}}
    35.             <br><br>
    36.             <button type="submit">提交button>
    37.         form>
    38.     div>
    39.     <script src="./node_modules/vue/dist/vue.global.js">script>
    40.     <script type="text/javascript">
    41.         const {createApp} = Vue;
    42.         const app=createApp({
    43.             data(){
    44.                 return{
    45.                     name:"aaa",
    46.                     sex: 0, //默认选中男
    47.                     skill: ['java'], //默认勾选java
    48.                     citys: 'sh',//默认选中
    49.                     remark: '',//初始化textarea
    50.                 }
    51.             },
    52.             methods:{
    53.                 subForm(){
    54.                     console.log("提交数据为：",this.name,this.sex,this.skill,this.citys,this.remark)
    55.                 }
    56.             }
    57.         }).mount("#app");
    58.         console.log("app",app);
    59.     script>
    60. body>
    61. html>

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

  • 相关阅读:
    【mysql】游标的基本使用
    扩展欧几里得算法的一种自顶向下实现
    敏捷开发使用
    一个霸占程序员休息时间的 APP
    《网络安全笔记》第二章：Windows基础命令
    [Python进阶] 操纵鼠标：PyAutoGUI
    什么是线程？为什么需要线程？和进程的区别？
    Qt事件机制
    TsinghuaDatabaseGroup - AIDB
    深入理解JavaScript ES8的新特性
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133914222