Vue.js 循环语句
Vue.js 循环语句
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Bfw' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>v-for 还支持一个可选的第二个参数，参数值为当前项的索引：v-for 实例
index 为列表项的索引值：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(site, index) in sites">
{{ index }} -{{ site.text }}
</li>
</ul>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Bfw' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>模板 <template> 中使用 v-for：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<template v-for="site in sites">
<li>{{ site.text }}</li>
<li>--------------</li>
</template>
</ul>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Bfw' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
const app = {
data() {
return {
object: {
name: 'BFW教程',
url: 'http://www.bfw.wiki',
slogan: '技术成就未来！'
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>你也可以提供第二个的参数为键名：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
const app = {
data() {
return {
object: {
name: 'BFW教程',
url: 'http://www.bfw.wiki',
slogan: '技术成就未来！'
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>第三个参数为索引：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
const app = {
data() {
return {
object: {
name: 'BFW教程',
url: 'http://www.bfw.wiki',
slogan: '技术成就未来！'
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>v-for 迭代整数
v-for 也可以循环整数<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
const app = {
data() {
return {
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>显示过滤/排序后的结果
我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。
v-for 实例
输出数组中的偶数：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
</div>
<script>
const app = {
data() {
return {
evenNumbers:[1,2,3]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>v-for/v-if 联合使用
实例联合使用 v-for/v-if 给 select 设置默认值：v-for/v-if 实例
v-for 循环出列表，v-if 设置选中值：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
</head>
<body>
<div id="app">
<select @change="changeVal($event)" v-model="selOption">
<template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
<!-- 索引为 1 的设为默认值，索引值从0 开始-->
<option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
<option v-else :value="site.name">{{site.name}}</option>
</template>
</select>
<div>您选中了:{{selOption}}</div>
</div>
<script>
const app = {
data() {
return {
selOption: "Bfw",
sites: [
{id:1,name:"Google"},
{id:2,name:"Bfw"},
{id:3,name:"Taobao"},
]
}
},
methods:{
changeVal:function(event){
this.selOption = event.target.value;
alert("你选中了"+this.selOption);
}
}
}
Vue.createApp(app).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 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
网友评论0