vue--循环列表

时间:2022-04-26 03:20:53
<template>
<div id="app">
<p v-for="x in list">{{x}}</p> //绑定列表
<p v-for="x in list1">{{x.name}}</p> //绑定列表
// 让第一个高亮显示
<p v-for="(x,k) in list" :class="{'red':k==0}">{{k}}--{{x}}</p>
// 让第二个变成蓝色
<p v-for="(x,k) in list" :class="{'red':k==0,'blue':k==1}">{{k}}--{{x}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data (){
return {
msg:"你好!",
list:['a','b','c','d'],
}
}
}
</script>