```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
<style>
.try{color:red;}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for='movie in films'> //数组-->
<!-- {
{movie.name}} -->
<!-- <li v-for='value in detial' //对象>
{
{value}} -->
<li v-for='(value,key,index) in detial'>
<!-- //键值对 index序号-->
{
{index}}:{
{key}}:{
{value}}
</li>
</ul>
<my></my>
<my></my>
</div>
<div id="app2">
<ul>
<li v-for="movie in films">
<span>电影名称:{
{movie.name}}</span>
<span>上映日期:{
{movie.date}}</span>
<ul>
<p>参演人员:</p>
<li v-for='act in movie.actor'>
{
{act}}
</li>
</ul>
<ul>
<li v-for='item in 3'>{
{item}}</li>
</ul>
</li
vue3- v-for、全局组件、局部组件
最新推荐文章于 2024-07-27 19:03:29 发布
本文详细探讨Vue3中v-for指令的用法,以及全局组件和局部组件的区别与应用场景。通过实例解析,帮助开发者更好地理解和掌握在Vue3中如何有效地利用这些特性进行开发。
摘要由CSDN通过智能技术生成