1. Toy模板网首页
  2. > Toy博客

Java实训第八天——2023.6.14

10月前 作者：Panda薄荷糖 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了Java实训第八天——2023.6.14。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、vue的环境搭建：

官方文档：https://v2.cn.vuejs.org/v2/guide/index.html

1.将vue.min.js复制到js中：
Java实训第八天——2023.6.14

2.在demo01.html中，引入js

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

3.将官方文档复制到demo01.html中
Java实训第八天——2023.6.14

demo01.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-width, initial-scale=1.0" />
    <title>vue环境搭建</title>
  </head>
    
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

4.出现如下结果，则环境搭建成功！
Java实训第八天——2023.6.14

二、文本数据绑定

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-width, initial-scale=1.0" />
    <title>文本数据绑定</title>
  </head>
  <body>
    <div id="app">
          <div>单个变量: {{message}} </div>
          <ul>普通数组:
              <li v-for="(city,index) in citys":key = "index">
                {{city}}
              </li>
          </ul>
          <div>单个对象： 姓名: {{person.name}}    --- 年龄:{{person.age}}   </div>
          <ul>对象数组
              <li v-for="(person,index) in persons":key="index">
              编号: {{person.id}}  姓名: {{person.name}}  --- 年龄:  {{person.age}}
            </li>
          </ul>
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: "hello vue!",
      citys: ["深圳", "广州", "兰州"],
      person: {
        name: "张三",
        age: 18,
      },
      persons: [
        { id:1,name: "张三", age: 18 },
        { id:2,name: "李四", age: 19 },
        { id:3,name: "王五", age: 19 },
      ],
    }
  })
</script>

运行结果：
Java实训第八天——2023.6.14

三、属性数据绑定

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-width, initial-scale=1.0" />
    <title>属性数据绑定</title>
  </head>
  <body>
    <div id="app">
      <!-- 属性是不能写{{}}的 -->
      <img :src="imgObj.imgSrc" alt="" id="imgObj.id" /> 
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {  
    imgObj: {
        imgSrc: "./img/girl1.jpg",
        id: 1001,
      },
  }
})
</script>

运行结果如下：
Java实训第八天——2023.6.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" />
    <title>事件绑定</title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: red;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :id="color"></div>
      <input type="button" value="改变DIV背景颜色" @click="test01"/>
      <input type="button" value="测试有参数的方法" @click="test02(100)"/>
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    color:"d1"
  },
  methods:{
    test01(){
        this.color=(this.color == "d1"?"d2":"d1");
    },
    test02(num){
      console.log(num);
    }
  }
})
</script>

运行结果：

五、案例1——全选/全不选

代码如下：

<!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>案例-全选全不选</title>
</head>

<body>
  <div id="root">
    <input type="checkbox" name="love" id="" value="cf" :checked="state"/>吃饭
    <input type="checkbox" name="love" id="" value="sj" :checked="state"/>睡觉
    <input type="checkbox" name="love" id="" value="sw" :checked="state"/>上网
    <input type="checkbox" name="love" id="" value="ddd" :checked="state"/>打豆豆
    <button @click="xz">选择</button>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#root", //绑定DOM根元素
    data: {
      state: false
    },
    methods: {
      xz(){
        this.state = (this.state==true?false:true);
      },
    },
  });
</script>

初始页面：
Java实训第八天——2023.6.14

点击选择后：
Java实训第八天——2023.6.14
再点一次选择：
Java实训第八天——2023.6.14

六、案例2——切换图片

主要内容： v-if 、v-show指令

最初版本可：Java实训第七天——四、DOM对象属性的操作案例

代码如下：

<!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>案例2-切换图片</title>
  </head>
  <body>
    <div id="root">
      <button @click="prev" v-show="index>0">上一张</button>
      <button @click="next" v-if="index<7">下一张</button>        
      <br />
      <img :src="mvImg[index]" alt="" style="width: 200px; height: 400px" />
    </div>
  </body>
</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
  el: '#root',
  data: {
    index:0,
    mvImg: ["./img/girl1.jpg", "./img/girl2.jpg", "./img/girl3.jpg", "./img/girl4.jpg",
     "./img/girl5.jpg", "./img/girl6.jpg", "./img/girl7.jpg", "./img/girl8.jpg"]
  },
  methods:{
    prev(){
      this.index--;
    },
    next(){
      this.index++;
    }
  },
})
</script>

七、表单数据绑定

代码如下：

<!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>表单数据绑定</title>
</head>

<body>
  <div id="root">
    账号:
    <input type="text" name="username" v-model="userForm.username" />
    <br />
    密码：<input type="password" name="userpass" id="" v-model="userForm.userpass" />
    <br />
    性别：<input type="radio" name="sex" id="" value="M" v-model="userForm.sex" />男
    <input type="radio" name="sex" id="" value="F" v-model="userForm.sex" />女
    <br />
    爱好:<input type="checkbox" name="love" id="" value="cf" v-model="userForm.love" />吃饭
    <input type="checkbox" name="love" id="" value="sj" v-model="userForm.love" />睡觉
    <input type="checkbox" name="love" id="" value="sw" v-model="userForm.love" />上网
    <input type="checkbox" name="love" id="" value="ddd" v-model="userForm.love" />打豆豆
    <br />
    籍贯:
    <select name="city" id="city" v-model="userForm.city">
      <option value="深圳">深圳</option>
      <option value="广州">广州</option>
      <option value="长勺">长勺</option>
    </select>
    <br />
    备注：<textarea name="remark" id="remark" cols="30" rows="10" v-model="userForm.remark"></textarea>
    <br />
    注册的数据:
    <div> {{info}} </div>
    <div> {{info2}} </div>
    <button @click="reg">注册</button>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#root", //绑定DOM根元素
    data: {
      info: undefined,
      info2:undefined,
      userForm: {
        username: undefined,
        userpass: undefined,
        sex: undefined,
        love: [],
        city: undefined,
        remark: undefined,
      }
    },
    methods: {
      reg() {
        this.info = this.userForm.username + "," + this.userForm.userpass + "," + this.userForm.sex 
        + "," + this.userForm.love + "," + this.userForm.city + "," + this.userForm.remark
        //console.log(this.userForm.love);
      }
    },
  });
</script>

初始页面：
Java实训第八天——2023.6.14
运行结果：
Java实训第八天——2023.6.14

八、综合练习

总结步骤：
  1. v-for渲染数据到表格和下拉框
  2. 添加功能
    2.1 准备 form对象 并在标签中用v-model绑定
    2.2 添加点击事件 利用js中数组的api push方法完成添加
  3. 删除功能
    3.1 删除按钮绑定事件并传入下标（要删除的数据的下标）
    3.2 方法中利用js中数组的api splice完成删除
  4. 优化表格显示
    添加一个tr 用v-show判断数组长度

代码如下：

<!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>学生信息维护</title>
</head>

<body>
  <div id="app">
    学号: <input type="text" v-model="studentForm.stuid"/> 
    姓名:<input type="text" v-model="studentForm.stuname"/> 
    年龄:<input type="number" v-model="studentForm.age"/>
    邮箱:<input type="email" v-model="studentForm.email"/> 
    所属班级:<select v-model="studentForm.classname">
      <option v-for="(c,index) in classes":key="index">
        {{c.classname}}
      </option>
    </select>
    <button @click="saveStudent">添加</button>
    <br />
    <br />
    <table width="400" border="1" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>所属班级</th>
        <th>操作</th>
      </tr>

      <tr v-for="(student,index) in students":key="index" v-show="students.length>0">
        <th>{{index+1}}</th>
        <th>{{student.stuid}}</th>
        <th>{{student.stuname}}</th>
        <th>{{student.age}}</th>
        <th>{{student.email}}</th>
        <th>{{student.classname}}</th>
        <th><button @click="deleteStudent(index)">刪除</button></th>
      </tr>
      <tr v-show="students.length==0">
        <td colspan="7" align="center">暂无数据</td>
      </tr>
    </table>
  </div>
</body>

</html>
<script src="./js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      studentForm:{
        stuid:undefined,
        stuname: undefined,
        age: undefined,
        email: undefined,
        classname: undefined,
      },
      classes: [
        { classid: 1, classname: "st0730" },
        { classid: 2, classname: "st0731" },
      ],
      students: [
        {
          stuid: 1001,
          stuname: "张三",
          age: "10",
          email: "aaa@qq.com",
          classname: "st0730",
        },
        {
          stuid: 1002,
          stuname: "李四",
          age: "15",
          email: "bbb@qq.com",
          classname: "st0731",
        },
        {
          stuid: 1003,
          stuname: "王五",
          age: "23",
          email: "ccc@qq.com",
          classname: "st0731",
        },
      ],
    },
    methods: {
      deleteStudent(index){
        this.students.splice(index,1);
      },
      saveStudent(){
        let stu = JSON.parse(JSON.stringify(this.studentForm));
        this.students.push(stu);
      }
    },
  });
</script>

运行结果：
Java实训第八天——2023.6.14
执行添加操作：
Java实训第八天——2023.6.14
删除操作：
Java实训第八天——2023.6.14
全部删除时显示：
Java实训第八天——2023.6.14文章来源地址https://www.toymoban.com/news/detail-483229.html

到了这里，关于Java实训第八天——2023.6.14的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Go学习第八天

    签名 验签

    2024年02月13日
    浏览(38)
  • 学习Spring的第八天

    学习Spring的第八天

     先对自定义类使用@MyComponet的注解，在设置这个@MyComponet的的属性(一个 MyComponentBeanFactoryPostProcessor.java如下:   还要在主配置文件里配置

    2024年01月20日
    浏览(42)
  • Leetcode刷题第八天-回溯

    Leetcode刷题第八天-回溯

    22：括号生成 链接：22. 括号生成 - 力扣（LeetCode） 括号是一对，所以每一次递归结束条件是字符串长度=2*n 有效括号判断：\\\'(\\\'个数==\\\')\\\'个数时，当前必须是\\\'(\\\'，\\\'(\\\'个数==n时，必须是\\\')\\\'，其他情况当前位置遍历两边，既可以是\\\'(\\\'又可以是\\\')\\\' generateParenthesis 89:格雷编码 链接：89.

    2024年02月19日
    浏览(37)

  • MFC第八天 基本数据类型介绍

    CRect类是MFC中用于表示矩形的类。它提供了方便的方法来操作矩形的位置和大小。CRect类常用于图形绘制、窗口管理和布局等场景。 可以用于绘制矩形、椭圆、圆等图形时需要指定其位置和大小。此外，CRect类还常用于窗口管理，可以通过CRect对象来设置窗口的位置和大小。它

    2024年02月11日
    浏览(44)
  • 每日后端面试5题 第八天

    每日后端面试5题 第八天

    1.UDP无连接，速度快，安全性低，适合高速传输、实时广播通信等。 2.TCP面向连接，速度慢，安全性高，适合传输质量要求高、大文件等的传输，比如邮件发送等。 （还有：TCP只能是一对一的，UDP支持一对一、一对多、多对一） （还有：TCP首部开销有20个字节；UDP分组首部开

    2024年02月11日
    浏览(44)
  • C语言百日刷题第八天

    C语言百日刷题第八天

    打印7层杨辉三角形 图案如下： 这个题我再前几天的刷题中也写过，但是很多人私信说上次写的太简陋了，那我这次就写完整。 通过图，可以看出。无论它是多少层的杨辉三角，它的前两层都是1,所以，无论我们会不会，都可以先把前两层搞定一下。其次，我们可以看出从第

    2024年01月22日
    浏览(33)
  • C语言属刷题训练【第八天】

    C语言属刷题训练【第八天】

    A: ‘a’ ‘b’ B: ab\\0c\\0 C: ab c D: ab 字符串的结束标志是’\\0’，而’\\0’的ASCII值是0，而c[2]被初始化为0，就相当于是’\\0’，故字符串打印的内容只有\\\"ab\\\"。 🧥知识点：字符串的结束标志 A: a[2][0] B: a[2][3] C: a[0][3] D: a[12][1] 本题主要考虑数组越界访问的情况，二维数组的行和列

    2024年02月13日
    浏览(39)
  • 自学大数据第八天~HDFS命令(二)

    自学大数据第八天~HDFS命令(二)

    嗨喽,好久不见,最近抽空复习了一下hadoop,书读百遍,其意自现这句话还真是; 改变文件 拥有者~chown 使用 -R 将使改变在目录结构下递归进行。命令的使用者必须是超级用户。 改变文件所属组-chgrp 改变文件权限-chmod 使用-R将使改变在目录结构下递归进行。命令的使用者必须是文

    2023年04月09日
    浏览(36)
  • 15天学习MySQL计划-SQL优化/视图（进阶篇）-第八天

    15天学习MySQL计划-SQL优化/视图（进阶篇）-第八天

    1.插入数据（insert） 1.批量插入 2.手动提交事务 3.主键顺序插入 4.大批量插入数据 如果一次性需要插入大批量数据，使用insert语句插入性能较低，此时可以使用MySQL数据库提供的load指令来进插入 方法如下。 2.主键优化 1.数据组织方式 2.页分裂 页可以为空，也可以填充一半，

    2023年04月26日
    浏览(52)
  • 0基础小白学习云计算的第八天（作者不易，你的关注就是我最大的动力）

    0基础小白学习云计算的第八天（作者不易，你的关注就是我最大的动力）

    1、首先输入：vim /etc/my.cnfi进入配置文件 2、第二步：在最下面加入：skip-grant-tables 3、第三步：#validate-password=off(之前学过的修改密码配置把他注释掉) ​ 操作如下图所示 4、重启数据库：systemctl restart mysqld ​ 操作如下图所示 5、描述mysql用户：desc mysql.user; ​ 操作如下图所示

    2024年01月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包