<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div class="app">
<ul>
<li>{{cities[0]}}</li>
<li>{{cities[1]}}</li>
<li>{{cities[2]}}</li>
</ul>
<hr>
<ul>
v-of for-of for(value of arr){...}
:key="city"必须添加 diff算法 key值必须唯一
<!-- <li v-for="city of cities">{{city}}</li> -->
<!-- index 唯一 -->
<li v-for="(city, index) of cities" :key='index'>{{index}}=>{{city}}</li>
</ul>
<hr>
<ul>
<!-- :key 来干扰diff算法 -->
<li v-for="(item, key) of user" :key="key">{{key}}=>{{item}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
// arr
cities: ['北京', '上海', '广州'],
// obj
user: {
name: 'zhangsan',
email: 'zhangsan@163.com'
}
}
}
}).mount('.app')
</script>
</body>
</html>
此处评论已关闭