Vue列表渲染循环对象
2020-10-09 本文已影响0人
云凡的云凡
image.png
上代码
遍历对象时，直接动态的往对象加值是不好用的，可以直接改引用。
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10列表渲染循环对象</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- item 对象的每一项，key 每一项的键名， index 每一项的位置 -->
<div v-for="(item,key,index) of userInfo">
{{item}}----{{key}}------{{index}}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
userInfo: {
name: 'yunfan',
age: '22',
hobby: 'writer',
from: 'nongcun'
}
}
})
</script>
</body>
</html>
