自学Vue four day！！！

最新推荐文章于 2024-05-04 17:39:55 发布
最新推荐文章于 2024-05-04 17:39:55 发布
阅读量125 收藏
点赞数
分类专栏： 小白自学Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49105225/article/details/117758639
版权

练习项目：

要求：完成添加、删除学生个人信息的功能，在删除时，弹出确认删除框；

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>学生管理系统</title>
     <link href="../public/css/bootstrap.min.css" rel="stylesheet">
     <link href="../public/css/style.css" rel="stylesheet">
     <style>
         .row>div{border: 1px solid #000;}
         .modal{display: block;opacity:1;top: 100px; overflow:visible;}
     </style>
 </head>
 <body>
     <div id="app">
     <div class="container">
         <table class="table table-striped">
             <caption>学生管理系统v1.0-展示学生</caption>
             <tr>
                 <th>姓名</th>
                 <th>年龄</th>
                 <th>性别</th>
                 <th>操作</th>
             </tr>
             <tr>
                 <td>小明</td>
                 <td>15</td>
                 <td>男</td>
                 <td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">删除</button></td>
             </tr>
             <tr>
                 <td>小明</td>
                 <td>15</td>
                 <td>男</td>
                 <td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">删除</button></td>
             </tr>
             <tr>
                 <td>小明</td>
                 <td>15</td>
                 <td>男</td>
                 <td>
                     <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">删除</button>
                 </td>
             </tr>
         </table>
         <hr>
         <hr>
         <hr>
         <form action="">
           <table class="table table-striped">
               <caption>添加学生信息</caption>
               <tr>
                   <td>项目</td>
                   <td>信息</td>
               </tr>
               <tr>
                   <td>姓名</td>
                   <td>
                       <input type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname">
                   </td>  
               </tr>
               <tr>
                   <td>年龄</td>
                   <td>
                       <input type="text" class="form-control" id="stuage" placeholder="年龄" name="stuage">
                   </td>  
               </tr>
               <tr>
                   <td>性别</td>
                   <td>
                       <label class="gen-span"><input type="radio" class="radio-info" name="gender" checked value="男"> 男</label>
                       <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="女"> 女</label>
                       <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="保密"> 保密</label>
                   </td>
               </tr>
           </table>
           <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="确定增加"/></div>
           </form>
     </div>
     <!-- 删除按钮确认框 -->
     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               <h4 class="modal-title" id="exampleModalLabel">确认框</h4>
             </div>
             <div class="modal-body">
               <form>
                  <div class="form-group">
                   <label for="message-text" class="control-label">确定要删除<strong class="control-label-name" style="color:blue">小明</strong>吗？</label>
                 </div>
               </form>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
               <a href="###" class="delete-a"><button type="button" class="btn btn-primary">确认</button></a>
             </div>
           </div>
         </div>
       </div>
     </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
             // 现有数据：
             /*
             arr:[
                 { name: '小明', age:12, gender:"男" },
                 { name: '小红', age:10, gender:"女" },
                 { name: '小刚', age:16, gender:"保密" }
             ]
             */
 </script>
 </body>
 </html>

打开效果如图所示：

Jason_HeSL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web前端本科未拿到学位证_您是否需要计算机科学学位才能成为成功的Web开发人员...
weixin_26729165的博客
10-10 297
web前端本科未拿到学位证I graduated from university three years ago with a computer science degree. It was one of the most difficult challenges I have taken on in my life. I was 47, so I understand what is invol...
电子邮件链接mailto_“ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档...
热门推荐
cumi7754的博客
07-17 3万+
电子邮件链接mailtoby Quincy Larson 昆西·拉尔森(Quincy Larson) “ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档 (The history of the “3 links” email and an archive of every link ever sent) It was March 2016. The freeCodeCamp comm...
2024年JavaScript 的json源码(3)，前端开发大佬的百度美团快手等大厂Offer收割之旅
最新发布
2401_84433769的博客
05-04 842
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记],:{}\s↩︎。
滴滴入职要学位证吗学位证_我如何在没有技术学位或工作经验的情况下找到全职开发人员工作...
cumian8165的博客
07-20 5023
滴滴入职要学位证吗学位证by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何在没有技术学位或工作经验的情况下找到全职开发人员工作 (How I landed a full stack developer job without a tech degree or work experience) Six months ago, I got my fir...
aws 认证_如何在家工作时获得任何AWS认证
cumi6497的博客
08-17 1352
aws 认证This article will teach you everything you need to know in order to get any AWS certification from home. You will learn how to schedule an exam, how to set up your workspace for the big day, and...
前端面试题
2401_84447328的博客
05-02 348
B. click目标 -> 捕获 -> 冒泡冒泡 -> 目标 -> 捕获目标 -> 冒泡 -> 捕获捕获 -> 目标 -> 冒泡A. onchange：用户改变域的内容B. onkeypress：某个键盘的键被按下或按住C. onmousedown：某个鼠标按键被按下D. onblur：元素获得焦点ACCDDDOM遍历A. ArrayB. ObjectC. StringDDBD其他outlinevisiblityfont-sizeC。
单片机编程技巧_编程技巧
weixin_26728245的博客
10-11 2595
单片机编程技巧From the desk of a brilliant weirdo #1:从辉煌的怪胎＃1的桌子上： Thank you for taking the time to check out this article. It doesn’t matter where you’re coming from (Codegiant, Hacker News, Reddit, or some...
aws 认证_引入#AWSCertified挑战：您的第一个AWS认证之路
08-12 4112
aws 认证You may already know that Amazon Web Services (AWS) is the largest, oldest, and most popular cloud service provider. But did you know they offer professional certifications, too? 您可能已经知道Amazon W...
vue安装包！！！！免费
05-31
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，用于构建用户界面。Vue的核心理念是简单易用、可维护性和高效性能。它采用组件化的开发方式，让开发者能够轻松地创建可复用的UI组件，提高了...
vue学习资料！！！！
03-27
vue学习资料！！！！
分享当下较新的30道Vue面试题！.docx
07-23
分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！....
vue.js！！！！！！！！
06-14
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，它以其易学易用、高效和可扩展性而受到广大开发者喜爱。Vue2是Vue.js的一个重要版本，它在Vue1的基础上进行了诸多改进和优化，使得框架更加...
vue面试题！！！！！！！！！！！！！
06-01
vue面试题
自学Vue 11天！！！
Jason_HeSL的博客
06-16 3562
自学Vue 11天！！！ 既昨天的内容继续往下。 四、Watch（熟悉） watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 简单点说，就是实时监听某个数据的变化。 1、普通监听 <template> <div class="home"> <input type="text" v-model="msg"> <h3>{{msg}}</h3> &lt...
自学Vue one day！！！
Jason_HeSL的博客
06-06 256
在学习之前需要先了解咱们Vue 一、Vue简介 吃水不忘挖井人，记住咱们的祖师爷、Vue的创造者：尤雨溪（Evan You）! ! ! Vue (读音 /vjuː/，类似于 view)，大家可不要读错了喔。 其次，Vue是一个渐进式的前端框架，那么什么是渐进式呢？ 渐进式表示说Vue是一个很庞大的一个生态核心库，里面包含了很多东西，而且都是相互嵌套的。比如说：Core+Vue-router+Vuex+axios（Vue全家桶），可以渐进的去学习，里面的知识是一层套一层，循序渐进。 如果大家想学习
自学Vue seven day！！！
Jason_HeSL的博客
06-12 134
弹框案例： 要求： 将弹窗内的内容在页面中展示； 点击按钮将弹窗关闭； <!DOCTYPE html> <html lang="en"> ​ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib...
自学Vue Eight Day！！！
Jason_HeSL的博客
06-13 133
自学Vue Eight Day！！！ 模仿ToDoList代办事项列表： 1、渲染数据 arr:[ { id:1, content:"内容1", isShowBorder:true, isFinished:true }, { id:2, content:"内容2", isShowBorder:true, isFinished:...
自学Vue ten day！！！
Jason_HeSL的博客
06-15 122
一、Devtools与Vscode开发配置（了解） Vue-Devtools是vue在做项目开发时常用的浏览器插件。 1、安装方式 升级浏览器至最新版 点击浏览器右上角的 三个点 ，在 更多工具 中，选择 扩展程序 打开 扩展程序 的 开发者模式 将 Vue.js Devtools_5.3.3.crx 这个插件直接拽入当前界面，即可完成安装，如需此文件，滴滴me~~ 2、打开控制台测试devtools 随意写一个点击事件，并查看点击效果 像一些使...
vue3 使用!importent优先级
05-26
在 Vue3 中，`.vue` 单文件组件中的 `<template>`、`<script>` 和 `<style>` 都被视为单独的模块，并且可以使用 `import` 导入其他模块。 当存在多个模块时，可以使用 `import` 关键字指定模块的导入顺序。如果同一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Jason_HeSL

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值