<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<h2>遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
---<button @click="deleteP(index)">删除</button>
---<button @click="updateP(index,{name:'ales',age:22})">刷新</button>
</li>
</ul>
<h2>遍历对象</h2>
<ul>
<li v-for="(valus,items) in persons[1]">
{{valus}}--{{items}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
persons:[
{name:'Tom',age:181},
{name:'Tom1',age:182},
{name:'Tom2',age:183},
{name:'Tom3',age:184},
]
},
methods:{
deleteP(index){
this.persons.splice(index,1)
},
updateP(index,newP){
this.persons.splice(index,1,newP)
}
}
})
</script>
</html>
Vue遍历数组
最新推荐文章于 2024-04-11 01:53:02 发布