<template> <div> <h3>ListRender</h3> <h3>遍历数组,不带key</h3> <ul class="left"> <li v-for="(listone, index) in listones"> {
{
index }}:姓名: {
{
listone.name }},年龄: {
{
listone.age }},性别: {
{
listone.sex }},手机号:{
{
listone.phone}} </li> </ul> <h3>遍历数组,带key,这里的key关联age[这里是没有唯一性的,因为年龄可以相同]</h3> <ul class="left"> <li v-for="(listone, index) in listones" :key="listone.age"> {
{
index }}:姓名: {
{
listone.name }},年龄: {
{
listone.age }},性别: {
{
listone.sex }},手机号:{
{
listone.phone}} </li> </ul> <h3>遍历数组,带key,这里的key关联phone[唯一性]</h3> <ul class="left"> <li v-for="(listone, index) in listones" :key="listone.phone"> {
{
index }}:姓名: {
{
listone.name }},年龄: {
{
listone.age }},性别: {
{
listone.sex }},手机号:{
{
listone.phone}} </li> </ul> </div> </template> <script scoped> export default {
name: "ListRender", data() {
return {
listones: [ {
name: "姬天道", age: 40, sex: "男",phone:"" }, {
name: "姬老魔", age: 60, sex: "男" ,phone:"" }, {
name: "陆州州", age: 28, sex: "男" ,phone:"" }, {
name: "陆阁主", age: 28, sex: "男" ,phone:"" } ], }; }, }; </script> <style scoped> .left{
text-align: left; } </style> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/177238.html原文链接：https://javaforall.net
