VUE表单提交

最新推荐文章于 2024-07-09 09:24:08 发布
最新推荐文章于 2024-07-09 09:24:08 发布
阅读量171 收藏
点赞数
分类专栏： Java-Web VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/103099762
版权
Java-Web 同时被 2 个专栏收录
32 篇文章 0 订阅
订阅专栏
VUE
32 篇文章 1 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加页面</title>
    <style>
        .left {
            width: 50%;
            /*background-color: #8a6d3b;*/
            float: left;
        }

        .right {
            width: 50%;
            /*background-color: #2fa0ec;*/
            float: left;
        }

        .left ul {
            list-style: none;
        }

        .left ul li {
            float: left;
        }

        #right_likes_select {
            list-style: none;
        }

        #right_likes_select li{
            float: left;
            margin-left: 10px;
        }

    </style>

    <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
    <div class="left">
        <table>
            <tr>
                <td> 姓名:</td>
                <td><input type="text" v-model="username"/></td>
            </tr>
            <tr>
                <td> 球类:</td>
                <td>
                    <select v-model="qiu">
                    <option>足球</option>
                    <option>排球</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>  喜好：</td>
                <td>
                    <ul class="likes">
                        <li v-for="item in likes">
                            <input type="checkbox" v-model="likes_select" :value="item"/>{{item}}
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>  所属地区：</td>
                <td>
                    <ul>
                        <li><input type="radio" v-model="diQu" value="河南"/>河南</li>
                        <li><input type="radio" v-model="diQu" value="天津"/>天津</li>
                        <li><input type="radio" v-model="diQu" value="山东"/>山东</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td > <button @click="add">添加</button></td>

            </tr>

        </table>
    </div>
    <div class="right">
        <h3>显示所有信息</h3>
        <p v-show="allInfo.length==0">温馨提示：没有信息</p>
        <ul>
            <li v-for="(item,index) in allInfo" :key="index">
                {{item.username}} -----{{item.qiu}} <br/>

                <ul id="right_likes_select">
                    <li v-for="(bb,ind) in item.likes_select" :key="ind"> {{bb}}</li>
                </ul><br/>
                {{item.diQu}}
                <br/>         <br/>
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</div>


</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username: "xuhaitao",
            qiu: "足球",
            likes_select: ["唱歌","跑步"],
            likes: ["唱歌", "跑步", "滑雪"],
            allInfo: [],
            diQu: "河南"
        },
        methods: {
            add() {
                const obj = {
                    "username": this.username,
                    "qiu": this.qiu,
                    "likes_select": this.likes_select,
                    "diQu": this.diQu
                }
                this.allInfo.unshift(obj)
            },
            del(index) {
                this.allInfo.splice(index, 1);
            }
        },
        computed: {}
    });
</script>

</html>

 

FR：xuhaitao
(hunk Xu)

海涛高软
关注
专栏目录
vue中的表单数据提交
Debug的博客
10-20 6127
```handlebars <template> <div> <form action="" @submit.prevent="handleSubmit"> <input type="text" placeholder="账户" v-model="username"> <input type="text" placeholder="密码" v-model="password"&gt.
vue表单提交
飞火龙在天的博客
10-12 2316
1、form标签 @submit.prevent="submit($event)" <form @submit.prevent="submit($event)"> <input type="text" class="form-control" placeholder="请输入姓名" name="username"> <input type="submit" value="登陆" class="login" /> </form> me...
vue 文本输入框 单选框 多选框 下拉列表框
海涛高软
10-08 1021
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加页面</title> <style> .left { width: 50%; ...
form表单数据和文件一起提交
最新发布
qq_39290137的博客
07-09 674
1、form表单数据和文件一起提交 2、对象转form-data
Vue 提交表单
热门推荐
Sun~Neo
04-13 4万+
1、form标签@submit.prevent="submit($event)" <form @submit.prevent="submit($event)"> <input type="text" class="form-control" placeholder="请输入姓名" name="username"> <input type="s...
Vue表单提交
鸟人的博客
07-19 1533
使用Vue进行表单提交。
Vue 基本的表单提交
文龙刚的博客
09-29 604
Vue 基本的表单提交
关于vue表单提交防双/多击的例子
10-16
总结来说，防止Vue表单提交的双击或多击可以通过自定义指令实现，主要是通过监听点击事件并在点击后禁用按钮，设置一个短暂的延时后再恢复其可用性。这种方法可以有效地防止用户在提交过程中发送重复请求，提高应用...
Vue form 表单提交+ajax异步请求+分页效果
08-30
Vue 表单提交、Ajax 异步请求和分页效果详解 在本篇文章中，我们将详细介绍 Vue 表单提交、Ajax 异步请求和分页效果的实现方法。这些技术是 Web 开发中常用的技术，能够提高用户体验和网站性能。 一、Vue 表单提交...
vue表单提交数组_vue表单数据交互提交演示教程
weixin_39865204的博客
12-21 1712
欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！1. 客户端 htmlTitle欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！boxnewrankdesctitle{{v.box}}{{v.new}}{{v.rank}}{{v.title}}提交var app = new Vue({el: '#app',data: {tabData: [{...
vue表单提交数组_VUE做出带有数据收集、校验和提交功能表单
weixin_39712865的博客
12-21 1334
这次给大家带来VUE做出带有数据收集、校验和提交功能表单，VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些，下面就是实战案例，一起来看一下。示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg安装npm install form-createORgit clone https://gi...
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
vue表单绑定实现多选框和下拉列表的实例
08-29
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue表单数据提交
weixin_56751539的博客
08-20 207
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单数据提交</title> </head> <body> <div id="app"> <!-- 1.定义表单 练习form标签与vue对象形成数据绑定--> ...
vue中input多选_vue实现下拉多选vue实现多选下拉框
weixin_39760967的博客
12-22 1953
效果展示image.png下拉组件∨//下拉列表{{item.Name}}data() {return {checkedData: [], //选中的数据isShow: false, //下拉列表是否显示selectCon: "", //选中的内容};},props: ["liData"],点击空白处隐藏下拉列表mounted() {let that = this;//点击页面空白处隐藏下拉列表d...
vue含附件的表单提交
qq_26905813的博客
05-04 3861
此帖的主要目的是记录以下两点： 1、使用elementUI的上传附件。 2、vue使用FormData，向接口传送表单数据（含附件）。 3、接口从HttpServletRequest中获取请求数据，通过@RequestPart(“USER_PHOTO_”) MultipartFile USER_PHOTO_获取附件数据。 …1、使用elementUI的上传附件… <el-upload action="uploadAction" list-type
vue下拉框多选
weixin_48860638的博客
04-20 5114
v-model绑定的value2就是你下拉框要多选的参数，例：1，2 <el-select v-model="value2" allow-create filterable multiple collapse-tags default-first-option placeholder="请选择文章标签"> <el-option v-for="item in options" :key="item.
Vue 下拉框 多选
weixin_42634971的博客
07-09 417
Vue 下拉框 多选 <!DOCTYPE html> <html lang="zh">  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0"...
vue表单提交生成二维码
04-20
在Vue中，可以使用第三方库来生成二维码，并且可以通过表单提交的数据来生成相应的二维码。下面是一个简单的示例： 1. 首先，你需要安装一个生成二维码的库，比如`qrcode`。可以使用npm或者yarn进行安装： ``` npm install qrcode ``` 2. 在Vue组件中引入`qrcode`库，并在表单提交后生成二维码。以下是一个示例代码： ```vue <template> <div> <form @submit.prevent="generateQRCode"> <input type="text" v-model="formData" placeholder="输入要生成二维码的内容" /> <button type="submit">生成二维码</button> </form> <div v-if="qrCodeData"> <img :src="qrCodeData" alt="二维码" /> </div> </div> </template> <script> import QRCode from 'qrcode'; export default { data() { return { formData: '', qrCodeData: '', }; }, methods: { generateQRCode() { // 使用qrcode库生成二维码 QRCode.toDataURL(this.formData) .then((url) => { this.qrCodeData = url; }) .catch((error) => { console.error(error); }); }, }, }; </script> ``` 在上述代码中，我们使用了`qrcode`库的`toDataURL`方法来生成二维码的DataURL，然后将其赋值给`qrCodeData`变量，最后在页面上显示生成的二维码。 请注意，上述代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值