Vue.js循环语句
v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名。
v-for可以绑定数据到数组来渲染一个列表:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-26 16:32:27
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="test in sites">
{{test.city}}
</li>
</ol>
</div>
<script>
const name={
data(){
return {
sites:[
{city:'sanghai'},
{city:"beijing"},
{city:"henan"}
]
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
v-for还支持一个可选的第二个参数,参数值为当前项的索引:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:33:47
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="(test,index) in sites">
{{index}}-{{test.city}}
</li>
</ol>
</div>
<script>
const name={
data(){
return {
sites:[
{city:'sanghai'},
{city:"beijing"},
{city:"henan"}
]
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
模板<template>中使用v-for:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:40:01
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<template v-for="(test,index) in sites">
<li >
{{index}}-{{test.city}}
</li>
<li>+++++++++++++++</li>
</template>
</ol>
</div>
<script>
const name={
data(){
return {
sites:[
{city:'sanghai'},
{city:"beijing"},
{city:"henan"}
]
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
v-for迭代对象
v-for可以通过一个对象的属性来迭代数据:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:49:21
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<template v-for="test in objects">
<li >
{{test}}
</li>
<li>+++++++++++++++</li>
</template>
</ol>
</div>
<script>
const name={
data(){
return {
objects:{
city1:'sanghai',
city2:"beijing",
city3:"henan"
}
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
当然了,也可以以键值对的形式进行展示
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:54:04
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<template v-for="(test,key) in objects">
<li >
{{key}}:{{test}}
</li>
<li>+++++++++++++++</li>
</template>
</ol>
</div>
<script>
const name={
data(){
return {
objects:{
city1:'sanghai',
city2:"beijing",
city3:"henan"
}
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
这里的命名并不是固定的,但是比较规范的写法是左边为键key,右边为值value。
我们再混合运用以下,再加上索引
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:57:37
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<template v-for="(test,key,index) in objects">
<li >
{{index}}-{{key}}:{{test}}
</li>
<li>+++++++++++++++</li>
</template>
</ol>
</div>
<script>
const name={
data(){
return {
objects:{
city1:'sanghai',
city2:"beijing",
city3:"henan"
}
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
v-for也可以迭代整数
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 09:59:41
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<template v-for="(test,index) in 10">
<li >
{{index}}-{{test}}
</li>
<li>+++++++++++++++</li>
</template>
</ol>
</div>
<script>
const name={
data(){
return {
objects:{
city1:'sanghai',
city2:"beijing",
city3:"henan"
}
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
下面的script里面的内容相当于声明,在上面的HTML中可以不用,并不影响代码执行。
显示过滤/排序后的结果
我们可以对数组的元素进行处理后再显示出来,一般可以通过创建一个计算属性,来返回过滤或排序后的数组。
下面将筛选出一堆数字中的偶数
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 10:13:06
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<!-- <template v-for="(test,index) in 10"> -->
<li v-for="a in oushu">
{{a}}
</li>
<!-- <li>+++++++++++++++</li> -->
<!-- </template> -->
</ol>
</div>
<script>
const name={
data(){
return {
// objects:{
// city1:'sanghai',
// city2:"beijing",
// city3:"henan"
numbers:[1,2,3,4,5,6,7,8,9,10]
}
},
computed:{
oushu(){
return this.numbers.filter(num=>num%2===0)
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
v-for/v-if联合使用
以上实例联合使用v-for/v-if给select设置默认值:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 10:38:24
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<!-- <ol>
<template v-for="(test,index) in 10">
<li v-for="a in oushu">
{{a}}
</li>
<li>+++++++++++++++</li>
</template>
</ol> -->
<select @change="changeopt($event)" v-model="opt">
<template v-for="(item,index) in city" :city="item" :index="index" :key="item.id">
<option v-if="index==1" :value="item.name" selected>{{item.name}}</option>
<option v-else :value="item.name">{{item.name}}</option>
</template>
</select>
<div>您选中了:{{opt}}</div>
</div>
<script>
const name={
data(){
return {
// objects:{
// city1:'sanghai',
// city2:"beijing",
// city3:"henan"
// numbers:[1,2,3,4,5,6,7,8,9,10]
opt:"Mez",
city:[
{id:1,name:"shanghai"},
{id:2,name:"Mez"},
{id:3,name:"beijing"}
]
}
},
methods:{
changeopt:function(event){
// return this.numbers.filter(num=>num%2===0)
this.opt=event.target.value;
alert("这个值被选中:"+this.opt);
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
在组件上使用v-for
在自定义组件上,我们可以像在任何普通元素上使用v-for:
<my-component v-for="item in items" :key="item.id"></my-component>
然而,任何数据都不会自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传到组件里,我们要使用props:
<my-component
v-for="(item,index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>
不自动将item注入到组件里的原因是,这会使得组件与v-for的运作紧密结合。明确组件数据的来源能够使组件在其他场合重复使用。
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 10:49:17
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 14:27:35
* @FilePath: \vscode\todo.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="todo-list">
<form action="" v-on:submit.prevent="addlist">
<label for="new-todo">添加列表项</label>
<input v-model="newtext" id="new-todo" placeholder="填写示例:唱跳rap篮球" />
<button>添加</button>
</form>
<ul>
<todo-item v-for="(todo,index) in lists" :key="todo.id" :title="todo.title" @remove="lists.splice(index,1)"></todo-item>
</ul>
</div>
<script>
const mez=Vue.createApp({
data(){
return{
newtext:'',
lists:[
{id:1,title:'唱'
},
{id:2,title:'跳'
},
{id:3,title:'rap'
},
],
nextTodoId:4
}
},
methods:{
addlist(){
this.lists.push({
id:this.nextTodoId++,
title:this.newtext
})
this.newtext=''
}
}
})
mez.component('todo-item',{
template:`
<li>
{{title}}
<button @click="$emit('remove')">删除</button>
</li>`,
props:['title'],
emits:['remove']
})
mez.mount('#todo-list')
</script>
</body>
</html>