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对象数组格式:文章来源:https://www.toymoban.com/news/detail-476165.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>
<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
多得(或扫描京东二维码)查看详情吧!
文章来源地址https://www.toymoban.com/news/detail-476165.html
到了这里,关于day02-JavaScript-Vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!