(三)Vue中的for指令
程序员文章站
2022-05-15 13:46:16
...
本节知识点
- vue中的for循环
- 特别提示在vscode编辑器中v-for里面还要加上:key="index"要不然会报错误
<div v-for ="(content,index) in score" :key="index" class="detailitem">
<img src="../../../static/images/[email protected]" alt="">
</div>
概述
v-for指令是循环渲染一组data中的数组，v-for指令需要以 item in items 形式的特殊语法,items是源数据数组并且item是数组中迭代的别名
特别注意的就是你需要哪个HTML标签循环，v-for就写在上面
基本用法
- v-for="(内容,属性,序号) in 数据" //对象模式,
- v-for = "(内容,序号) in 数据" //数组模式
- 把in 换成 of都行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="(content,index) in message">
{{index}}:{{content}}
</li>
</ul>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message: [11,12,23,24,45]
}
})
</script>
</html>
循环出来对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="(content,index) in message2">
{{content.name}}-{{content.age}}
</li>
</ul>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message2:[
{"name":"小明","age":"18"},
{"name":"小红","age":"28"},
{"name":"小光","age":"38"},
]
}
})
</script>
</html>
排序
在vue里面不允许你直接对源数据进行操作，要想操作源数据，必须在computed里面
然后页面渲染的也就是computed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="(content,index) in remessage">
{{index}}:{{content}}
</li>
<li v-for="(content,index) in remessage2">
{{content.name}}-{{content.age}}
</li>
</ul>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message: [11,12,23,24,45,7],
message2:[
{"name":"小明","age":"18"},
{"name":"小红","age":"28"},
{"name":"小光","age":"8"},
]
},
computed:{
remessage: function(){
return this.message.sort(sortnum);
},
remessage2:function(){
return this.message2.sort(sortobj);
}
}
})
function sortnum(a,b)
{
return a-b;
}
function sortobj(a,b){
return a.age-b.age;
}
</script>
</html>
- 这里特别注意的就是computed下面的名称不能和data里面重名千万注意.
上一篇： Vue的学习笔记三：Vue常用指令
下一篇： sty的今日计划