vue-例3-15综合示例演示注册.html

最新推荐文章于 2024-05-20 22:38:25 发布
最新推荐文章于 2024-05-20 22:38:25 发布
阅读量111 收藏
点赞数
分类专栏： Vue 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modern358/article/details/129968439
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合示例演示注册</title>
</head>
<body>
    <div id="app">
        <h2 style="text-align: center">填写个人简介</h2>
        <div style="width: 500px;float: left">
            <div style="margin-left: 30px;">
                <form action="">
                    姓名：<input type="text" v-model="user" name="user"><br><br>
                    <fieldset style="margin-right: 30px">
                        <legend>健康信息</legend>
                        身高：<input type="text" v-model="height"><br>
                        体重：<input type="text" v-model="weight">
                    </fieldset>
                    <br>
                    性别：<input type="radio" value="男" v-model="sex">
                    <label for="">男</label>
                    <input type="radio" value="女" v-model="sex">
                    <label for="">女</label>
                    <br>
                    喜爱的运动：<br><br>
                    <input type="checkbox" value="篮球" v-model="checkedNames">
                    <label for="">篮球</label>
                    <input type="checkbox" value="足球" v-model="checkedNames">
                    <label for="">足球</label>
                    <input type="checkbox" value="排球" v-model="checkedNames">
                    <label for="">排球</label>
                    <input type="checkbox" value="游泳" v-model="checkedNames">
                    <label for="">游泳</label>
                    <input type="checkbox" value="跑步" v-model="checkedNames">
                    <label for="">跑步</label>
                    <br>
                    <br>
                    <label for="">地址：</label>
                    <select name="city" id="city" v-model="address">
                        <option value="">请选择城市</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="南京">南京</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                        <option value="杭州">杭州</option>
                        <option value="拉萨">拉萨</option>
                    </select>
                    <br><br>
                    个人简介：<br>
                    <textarea name="profile" id="profile" cols="50" rows="10" v-model="profile"></textarea>
                    <br><br>
                    <div style="text-align: center">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </div>
                </form>
            </div>
        </div>
        <div style="width: 499px;float:right;">
            <div style="margin-left: 30px">
                姓名：{{user}}<br><br><br>
                身高：{{height}}<br>
                体重：{{weight}}<br>
                性别：{{sex}}<br><br>
                喜爱的运动：{{checkedNames}}<br><br>
                地址：{{address}}<br><br>
                个人简介:{{profile}}<br><br>
            </div>
        </div>
    </div>

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

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               user:'虾米大王',
               height:178,
               weight:80,
               sex: '男',
               checkedNames: ['跑步','游泳'],
               address: '拉萨',
               profile:'学习vue',
           }
        });

    </script>

    <style>
        #app{
            margin: 0 auto;
            width: 1000px;
            height: 610px;
            border: 1px solid #0f0f0f;
        }

    </style>
</body>
</html>

虾米大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VB注册码代码示例.（有源码+实例）
12-30
VB注册码代码示例. 可以学习、参考，适合新入门的各位兄弟
html5 案例练习（注册页面）
baipenggui_bo
08-16 423
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘</title> </head> <body> <table width="600" align="center" > <caption><h4>青春不常在，抓紧谈恋爱</h...
web前端学习55-58（综合案例-注册页面）
weixin_51249285的博客
11-09 738
综合案例-注册页面（1） 基本框架，后续需调整格式等细节 eg: 综合案例-注册页面1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
html-综合案例之注册页面
m0_53163148的博客
09-17 750
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。
实现综合案例的注册（register）、登录（login）和跳转到主页面（index）的功能
qq_69105510的博客
06-08 1328
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小兔鲜案例</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> ......
vue-html5-editor使用代码示例
04-27
本人博客文章--富文本编辑器 vue-html5-editor的集成与使用源代码
vue-devtools安装工具包.zip
03-23
内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue-3d-model：:camera:vue.js 3D模型查看器组件
02-06
例安装使用npm npm install vue-3d-model --save或使用脚本标签供全球使用< script src =" https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js " > </ script > 或下载并将其包含在您的html中...
vue-d3-examples:vue d3示例
03-30
Vue D3 V5示例 Vue D3 V5 Examples npm： v6.7.0 节点： v11.10.0 版本： v2.6.6 d3： v5.12.0 在线预览 项目设置 npm install npm运行皮棉和npm运行发球 npm run dev 编译和热重装以进行开发 npm run serve ...
前端笔记08 - 综合案例-注册页面
kukudeqi的博客
09-17 88
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合
14-综合案例-注册页面
WangZhang_521的博客
12-22 101
14-综合案例-注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
DHTML技术综合演示---示例:表格创建2
大Z小z的博客
05-14 271
DHTML技术综合演示---示例:表格创建2 table{ border:#00ffff solid 2px; width:500px; border-collapse:collapse; } table td{ border:#ff80ff solid 2px; padding:5px; margin:1px; } //创建固定行数和列数的表格-
Web前端开发技术、详细文章、（例子）html 列表、有序列表、无序列表、列表嵌套
最新发布
jingyu飞鸟
05-20 949
为首标记，以...
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
hx_1199的博客
05-17 435
rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
自动化测试报告样式HTMLTestRunner、BeautifulReport、HTMLReport、Allure你喜欢哪个？
qq_48811377的博客
05-17 710
有很多种自动化测试报告样式，接下来主要看下这些常用样式的效果是怎样的每个样式各有特点，选择自己喜欢的使用就好了自动化测试时你用的最多的是哪个呢？
前端基础入门三大核心之HTML篇：解密标签、标题与段落的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1084
标题标签从到，分别代表六个不同的层级，最为重要，则较为次要。合理使用标题不仅有助于内容结构化，也有助于SEO。
HTML 常用空元素标签
DaPiCaoMin的博客
05-17 720
空元素标签，也称为自闭合标签，在 HTML 中没有内容，它们通常用于表示一些简单的结构或功能。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1027
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
在vue3中 vue-upload-component多文件上传示例
06-13
在Vue3中，你可以使用vue-upload-component插件进行多文件上传操作。以下是一个示例代码： ``` <template> <div> <vue-upload-component ref="upload" :multiple="true" :extensions="['jpg', 'jpeg', 'png']" :max-size="5" :url="uploadUrl" @input-filter="inputFilter" @upload-success="uploadSuccess" @upload-error="uploadError" > <button>Upload Files</button> </vue-upload-component> </div> </template> <script> import VueUploadComponent from 'vue-upload-component'; export default { components: { VueUploadComponent, }, data() { return { uploadUrl: 'your-upload-url', }; }, methods: { inputFilter(newFile, oldFile, prevent) { if (newFile && (!oldFile || oldFile.error)) { if (/\.(jpg|jpeg|png)$/.test(newFile.name.toLowerCase())) { newFile.new = true; } else { prevent(); this.$notify({ title: 'Error', message: 'Only upload jpg/jpeg/png files', type: 'error', }); } } }, uploadSuccess(response, file, fileList) { console.log('Upload Success', response, file, fileList); }, uploadError(response, file, fileList) { console.log('Upload Error', response, file, fileList); }, }, }; </script> ``` 在这个示例中，我们首先引入了vue-upload-component插件，然后在模板中使用了这个组件，并设置了相关属性和事件。其中，我们设置了multiple属性为true，这样可以允许用户选择多个文件进行上传；设置了extensions属性为['jpg', 'jpeg', 'png']，这样可以限制只能上传jpg、jpeg和png格式的文件；设置了max-size属性为5，这样可以限制文件大小不超过5MB；设置了url属性为上传接口的地址。在事件中，我们实现了inputFilter、uploadSuccess和uploadError三个方法，用来过滤文件、处理上传成功和上传失败的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持，我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值