```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-05-28 23:40:22 发布