在前後端交互時。我們會向前端發送很多數據,這些數據,往往被封裝在一個集合中,而數據傳送到前端後。
前端程序員會將這些數據展示給用戶。
至於如何展示這些數據,我相信大家都有自己的想法。我這裏重點介紹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"
就可以獲取後臺傳過來的值。是不是非常的簡單,如果還是不會用的話就私信我吧