day02-JavaScript-Vue

news2024/11/24 23:00:19

1 JavaScript

html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以接下来我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。

1.5.1.3 JSON对象

自定义对象

在 JavaScript 中自定义对象特别简单,其语法格式如下:

var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性:

对象名.属性名

通过如下语法调用函数:

对象名.函数名()

接下来,我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象

<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        eat: function(){
             console.log("用膳~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

浏览器控制台结果如下:

在这里插入图片描述

其中上述函数定义的语法可以简化成如下格式:

    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //      console.log("用膳~");
        //  }
        eat(){
            console.log("用膳~");
        }
    }
json对象

JSON对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下:

{
    "key":value,
    "key":value,
    "key":value
}

其中,key必须使用引号并且是双引号标记,value可以是任意数据类型。

例如我们可以直接百度搜索“json在线解析”,随便挑一个进入,然后编写内容如下:

{
	"name": "李传播"
}

在这里插入图片描述

但是当我们将双引号切换成单引号,再次校验,则报错,如下图所示:

在这里插入图片描述

那么json这种数据格式的文本到底应用在企业开发的什么地方呢?-- 经常用来作为前后台交互的数据载体

如下图所示:前后台交互时,我们需要传输数据,但是java中的对象我们该怎么去描述呢?我们可以使用如图所示的xml格式,可以清晰的描述java中需要传递给前端的java对象。

在这里插入图片描述

但是xml格式存在如下问题:

  • 标签需要编写双份,占用带宽,浪费资源
  • 解析繁琐

所以我们可以使用json来替代,如下图所示:

在这里插入图片描述

接下来我们通过代码来演示json对象:注释掉之前的代码,编写代码如下:

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);

浏览器输出结果如下:

在这里插入图片描述

为什么呢?**因为上述是一个json字符串,不是json对象,所以我们需要借助如下函数来进行json字符串和json对象的转换。**添加代码如下:

var obj = JSON.parse(jsonstr);
alert(obj.name);

此时浏览器输出结果如下:
在这里插入图片描述

当然了,我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码:

alert(JSON.stringify(obj));

浏览器输出结果如图所示:

在这里插入图片描述

整体全部代码如下:

<!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>JS-对象-JSON</title>
</head>
<body>
    
</body>
<script>
    //自定义对象
    // var user = {
    //     name: "Tom",
    //     age: 10,
    //     gender: "male",
    //     // eat: function(){
    //     //      console.log("用膳~");
    //     //  }
    //     eat(){
    //         console.log("用膳~");
    //     }
    // }

    // console.log(user.name);
    // user.eat();


    // //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    //alert(jsonstr.name);

    // //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    //alert(obj.name);

    // //js对象--json字符串
    alert(JSON.stringify(obj));


</script>
</html>

遍历数组或集合

$.each(data,function(key,value){}),主要用于遍历数组或json对象等

var json = {"name":'张飞',"age":13};
$.each(json,function(key,val){
    console.log(key,val);
})

jquery解析json对象数组

<script>
        //json对象数组,拿过来;
        //数据库拿过来的是一个json数组字符串;
        // let users=[{"id":1,"name":"tom","age":22,"gendar":"男"},
        //             {"id":2,"name":"jack","age":33,"gendar":"女"},
        //             {"id":3,"name":"peter","age":1,"gendar":"男"}
        //         ];
                
        // let result=JSON.stringify(users);
        // console.log(result);
        // //typeof
        // console.log(typeof(result));
        
        //result:从数据库传递过来的一个json字符串
        let result='[{"id":1,"name":"tom","age":22,"gendar":"男"},{"id":2,"name":"jack","age":33,"gendar":"女"},{"id":3,"name":"peter","age":1,"gendar":"男"}]';
        //需要先转换一下
        let users2=JSON.parse(result);
            
        //解析一下;
        //key:还是之前的下标;0  1  2;
        //value:是一个json对象;[object Object]
        //      需要时json对象的值;
        $.each(users2,function(key,user){
            //    对象.属性;
            console.log(key+","+user.id+","+user.name);
        })
    </script>

使用vue的v-for指令解析json对象数组格式:

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 2.html5元素; v-for指令遍历; -->
    <div id="app">
        <table border="1" align="center" width="50%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 在写v-for的时候,一定是这个数据,可以重复执行;
                参数1:单个数据元素;
                参数2:索引
                json对象:[object Object]
                    对象.属性s
            -->
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-show="user.gendar==1"></span>
                    <span v-show="user.gendar==2"></span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=0 && user.score<60">不及格</span>
                    <span v-else-if="user.score>=60 && user.score<80">良好</span>
                    <span v-else-if="user.score>=80 && user.score<=100">优秀</span>
                    <span v-else>不合规</span>
                </td>
            </tr>
        </table>
    </div>
    <!-- 3.js -->
    <script>
        new Vue({
            el:'#app',      //绑定
            data:{
               users:[{"name":"张三","age":22,"gendar":1,"score":55},
                        {"name":"李四","age":36,"gendar":2,"score":69},
                        {"name":"王武","age":52,"gendar":1,"score":-89}
                    ] 
            }
        });
    </script>
</body>
</html>

618,清华社 IT BOOK 多得图书活动开始啦!活动时间为 2023 年 6 月 7 日至 6 月 18 日,清华
社为您精选多款高分好书,涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多
个 IT 开发领域,适合不同层次的读者。全场 5 折,扫码领券更有优惠哦!快来京东点击链接 IT BOOK
多得(或扫描京东二维码)查看详情吧!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624291.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux(信号发送后)

目录&#xff1a; 1.引入什么是合适的时候 2.内核态和用户态 3.信号的处理 4.sigaction函数 -------------------------------------------------------------------------------------------------------------------------------- 1.引入什么是合适的时候 2.信号什么时候被处…

你真的会PPT配色吗?来看看这篇吧,瞬间让你的PPT高大上起来

本文档使用技巧如下截图 在色彩里使用其它填充颜色 选取这个“吸管” 用于吸别人的颜色 我曾经为了出一个“惊艳”的PPT,光吸管用了不下150次。 好的艺术家复制,伟大的艺术家偷窃!--毕加索 下面就给出几大常用配色 各位在使用时注意看这些“色卡”的规律,那就是反差色…

安卓系统浏览器开发

预置某个浏览器为系统默认的浏览器 描述: 当系统存在多个浏览器时&#xff0c;如何预置某个浏览器为系统默认的浏览器&#xff1f; 方法: 1.在PackageManagerService.java中的构造函数结尾添加&#xff1a;setDefaultBrowser(); 2.setDefaultBrowser()的具体实现&#xff…

TDengine 合作伙伴 +1,这次是「DaoCloud道客」

随着我国数字经济持续快速发展&#xff0c;各行各业都在积极拥抱云技术&#xff0c;上云成为企业加快数字化转型步伐的关键一步。在此过程中&#xff0c;越来越多的企业开始意识到云原生技术的重要性&#xff0c;利用云原生更快地开发和部署应用程序&#xff0c;提高应用程序的…

智慧信访大数据挖掘平台解决方案

TipDM数据挖掘建模平台由泰迪自主研发&#xff0c;面向大数据挖掘项目的工具。平台使用JAVA语言开发&#xff0c;采用B/S结构&#xff0c;用户不需要下载客户端&#xff0c;可通过浏览器进行访问。平台提供了基于Python、R以及Hadoop/Spark分布式引擎的大数据分析功能。平台支持…

人民大学加拿大女王大学金融硕士——为什么这么多人选金融行业呢

又是一年毕业季&#xff0c;越来越多的新人涌入职场&#xff0c;金融行业依然是择业人们的香饽饽。为什么大家会选金融行业呢&#xff1f;金融行业是一个充满挑战但也充满魅力的行业。在这个快节奏的行业中&#xff0c;人们不断地面对着机遇和挑战&#xff0c;而这个行业也为那…

TLD5097EL-ASEMI代理英飞LED驱动TLD5097EL

编辑&#xff1a;ll TLD5097EL-ASEMI代理英飞LED驱动TLD5097EL 型号&#xff1a;TLD5097EL 品牌&#xff1a;Infineon(英飞凌) 封装&#xff1a;SSOP-14-EP-150mil 类型&#xff1a;LED驱动、汽车芯片 TLD5097EL特性 输入电压范围宽&#xff0c;从4.5 V到45 V 极低关断…

【FATE联邦学习】FATE 自定义Trainer

背景 自己定义了模型后&#xff0c;需要自行定义训练方式。 这里文档给了方法&#xff0c;但是大部分还是需要自己看源码摸索。 https://fate.readthedocs.io/en/latest/tutorial/pipeline/nn_tutorial/Homo-NN-Customize-Trainer/https://fate.readthedocs.io/en/latest/tu…

如何按需下载和安装Win10补丁

如何按需下载和安装Win10补丁 一般我们都是通过系统自带的Windows更新来直接安装补丁&#xff0c;这种方式虽然方便&#xff0c;但是耗时久&#xff0c;而且更新体量也大&#xff0c;会占用很多空间&#xff0c;其实我们完全可以按需下载和安装&#xff0c;下面就给大家介绍方法…

FPGA量子类比机制-FPQA,将在量子运算设计中引发一场新的革命

1980年代现场可程式化逻辑门阵列(FPGA)的出现彻底改变了电子设计。大约40年后&#xff0c;现场可程式化量子位元阵列(FPQA)可望在量子运算电路设计中引发一场类似的革命。 1980年代现场可程式化逻辑闸阵列(FPGA)的出现彻底改变了电子设计。FPGA允许设计人员创建适合特定应用的…

3DCAT亮相糖酒会,为元宇宙展会提供实时云渲染支持

4月12日&#xff0c;第108届全国糖酒商品交易会&#xff08;下文简称“糖酒会”&#xff09;在成都正式开幕&#xff0c;吸引了众多酒类企业和行业人士的参与。 图片源自新华社 本次糖酒会上&#xff0c;某展会采用了“双线”模式&#xff0c;除了线下的实体展位&#xff0c;还…

burpsuite工具的使用(详细讲解)

一&#xff09;前言 我已经在之前详细的说明了burpsuite的安装过程&#xff0c;如果不了解的可以看 burpsuite安装教程 &#xff1a;http://t.csdn.cn/uVx9X 在这了补充说明一下&#xff0c;在安装完burpsuite并设置完代理后&#xff0c;会出现如果访问的url是使用http协议的…

变频器需要定期更换的器件有哪些

导语&#xff1a;​变频器是由许多电子零件构成&#xff0c;例如半导体元件等&#xff0c;在使用和维护当中就涉及到更换部件的问题&#xff0c;由于变频器组成或物理特性的原因&#xff0c;在一定的时期内会产生劣化&#xff0c;因而会降低变频器的特性&#xff0c;甚至会引起…

python---实现一个简化版本的人生模拟器

1.游戏开始的时候,设定初始属性—颜值 体质 智力 家境 2.开始游戏,随机生成性别和出生点 3.针对每一年,都生成人生经历(依靠一定的随机因素当前角色属性) 需要import random一下 一些函数 代码的部分运行情况,由于代码过长此处不予展示!这个部分只写了幼年时期发生的事件!

分布式项目 12 用jsonp来完成单点登录功能(两个系统之间进行信息交互)

在项目中使用ctrlH &#xff0c;来快速查找相关的hrl请求。 首先全部的请求会进过jt-web&#xff0c;在进行对其他系统的通信。 说明&#xff1a;当点击“登录”或者"免费注册"跳转到登录或者注册页面。 在jt-web项目中&#xff0c;声明UserController资源&#…

【建议收藏】自动化测试框架开发教程

在自动化测试项目中&#xff0c;为了实现更多功能&#xff0c;我们需要引入不同的库、框架。 首先&#xff0c;你需要将常用的这些库、框架都装上。 pip install requests pip install selenium pip install appium pip install pytest pip install pytest-rerunfailures pip …

Vue 项目环境搭建和创建准备工作

一. 学习目标 掌握 Vue 项目创建的依赖环境掌握 Vue 项目创建过程 二. 学习内容 掌握搭建 Vue 项目准备环境掌握 Vue 项目创建过程了解 Vue 项目各子目录 三. 学习过程 1. 准备工作 &#xff08;1&#xff09;安装Node.js 打开node.js官网&#xff1a;Node.js &#xff0…

SpringBoot中事务失效的六个原因

SpringBoot中事务失效的原因&#x1f6a9; 常见的事务失效原因包括如下六个: 1. 事务方法非public修饰 由于Spring的事务是基于AOP的方式结合动态代理来实现的。因此事务方法一定要是public的&#xff0c;这样才能便于被Spring做事务的代理和增强。 而且&#xff0c;在Spri…

uniapp 横向滑动list(不同内容)分部问题:scroll-view,swiper overflow-x

横向滑动list,可使用标签&#xff1a; 1&#xff1a;scroll-view 2&#xff1a;swiper 3&#xff1a;overflow-x 正常来讲横向滑动的话 &#xff0c;需要特殊设置&#xff0c;只用view 设置display&#xff1a;flex&#xff0c;的话 无法横向滑动&#xff0c;右边的就会隐…

Melody 监控(四十九)

当新的世界出现&#xff0c;请立即向他奔去 上一章简单介绍了Spring Boot Actuator详解(四十八), 如果没有看过,请观看上一章 一. JavaMelody 一.一 什么是 Java Melody JavaMelody是一个方便的Java或JavaEE Web 应用程序监控工具。 它允许自动存储由 Web 应用程序的实际操…