在前后端交互时。我们会向前端发送很多数据,这些数据,往往被封装在一个集合中,而数据传送到前端后。
前端程序员会将这些数据展示给用户。
至于如何展示这些数据,我相信大家都有自己的想法。我这里重点介绍Vue的条件渲染:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<template v-for="(item,key,index) of userInfo" :key="item.id">
<div>
{{item}}--------------{{key}}-----{{index}}
</div>
<span>
{{item}}
</span>
</template>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
userInfo:{
name: 'Dell',
age: 28,
gender: 'male',
salary: 'secret'
}
}
});
</script>
</html>
以上data中的数据就是模拟后台传输过来的一个对象。而在JavaScript中对象本身就可以看作数组。
我们只需要在div中添加一行代码:
v-for="(item,key,index) of userInfo" :key="item.id"
就可以获取后台传过来的值。是不是非常的简单,如果还是不会用的话就私信我吧