vue.js列表渲染

最新推荐文章于 2024-10-10 08:39:33 发布

依米_

最新推荐文章于 2024-10-10 08:39:33 发布

阅读量744

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_41153478/article/details/80326414

版权

vue.js 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div id="app">


<div v-for="(item,index) of list"
:key="item.id">
{{item.text}} + {{index}}
</div>


</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var vm= new Vue({
el:"#app",
data:{
list:[
// 后端的数据传送到前端的时候会携带一个唯一的id
{
id:"01",
text:"hello"
},
{
id:"02",
text:"w"
},
{
id:"03",
text:"j"
}
]
}
})

在div里在添加一项语法在控制台 vm.list.push({id:"04",text:"sfh"})
</script>
</body>

</html>

//在div里在添加一项语法在控制台 vm.list.push({id:"04",text:"sfh"})

//如果这么写vm.list[3] = {id:"04",text:"sth"}，不会渲染出来，在sctocs里会出现代码

当改变列表项的内容时，不能只通过下标来添加，要通过vue的几个操作数组的方法，才能是数据发生变化，页面也进行响应式的变化。

这些方法是///这些方法是push pop shift unshift splice sort reverse

vm.list.splice(1,1,{id:"2",text:"wt"},{id:"3",text:"wt3"}) 第一个参数是改变从第几项开始改变，第二个参数是删除几条，第三个参数是添加的内容

//第二种方法是改变s数据的引用地址，在控制台数入
//vm.list=[
后端的数据传送到前端的时候会携带一个唯一的id
// {
// id:"01",
// text:"hello"
// },
// {
// id:"02",
// text:"w3"
// },
// {
// id:"03",
// text:"j"
// }

// ]，发现页面w变为w3

不仅要循环div还要循环一个span标签

<div id="app">


<div v-for="(item,index) of list"
:key="item.id">
{{item.text}} + {{index}}
</div>
<span v-for="(item,index) of list"
:key="item.id">{{item.text}}
</span>

</div>

<div v-for="(item,index) of list"
:key="item.id">
<div >
{{item.text}} + {{index}}
</div>
<span>
{{item.text}}
</span>