VUE框架循环取值从props中获取信息v-for取出数据------VUE框架

旧城等待， 2024-02-26 04:55 4阅读 0赞

>     <template>
>       
>       <div id="app">
>          <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
>          <Hello></Hello>
>       </div>
>     </template>
>     
>     <script>
>     // import HelloWorld from './components/HelloWorld.vue'
>     import Movie from './components/Movie.vue'
>     import Hello from './components/Hello.vue'
>     Movie,name
>     export default {
>       name: 'App',
>       data:function(){
>         return{
>           movies:[
>             {id:1,title:"金刚狼",rating:8.7},
>             {id:1,title:"金刚狼",rating:8.8},
>             {id:1,title:"金刚狼",rating:8.6}
>           ]
>         }
>       },
>       components: {
>         // HelloWorld
>         Movie,
>         Hello
>       }
>     }
>     </script>
>     
>     <style>
>     #app {
>       font-family: Avenir, Helvetica, Arial, sans-serif;
>       -webkit-font-smoothing: antialiased;
>       -moz-osx-font-smoothing: grayscale;
>       text-align: center;
>       color: #2c3e50;
>       margin-top: 60px;
>     }
>     </style>
> 
> <template>
> 
> 
> 
> <div id="app">
> 
> <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
> 
> <Hello></Hello>
> 
> </div>
> 
> </template>
> 
> <script>
> 
> // import HelloWorld from './components/HelloWorld.vue'
> 
> import Movie from './components/Movie.vue'
> 
> import Hello from './components/Hello.vue'
> 
> Movie,name
> 
> export default \{
> 
> name: 'App',
> 
> data:function()\{
> 
> return\{
> 
> movies:\[
> 
> \{id:1,title:"金刚狼",rating:8.7\},
> 
> \{id:1,title:"金刚狼",rating:8.8\},
> 
> \{id:1,title:"金刚狼",rating:8.6\}
> 
> \]
> 
> \}
> 
> \},
> 
> components: \{
> 
> // HelloWorld
> 
> Movie,
> 
> Hello
> 
> \}
> 
> \}
> 
> </script>
> 
> <style>
> 
> \#app \{
> 
> font-family: Avenir, Helvetica, Arial, sans-serif;
> 
> \-webkit-font-smoothing: antialiased;
> 
> \-moz-osx-font-smoothing: grayscale;
> 
> text-align: center;
> 
> color: \#2c3e50;
> 
> margin-top: 60px;
> 
> \}
> 
> </style>

>     <template>
>         <div>
>             <h1>{
>         {title}}</h1>
>             <span>{
>         {rating}}</span>
>             <button @click="fun">点击收藏</button>
>         </div>
>     </template>
>     <script>
>         export default{
>             name:"Movie",
>             props:["title","rating"],
>             data:function(){
>                 return{
>                     
>                 }
>             },
>             methods:{
>                 fun(){
>                     alert("收藏成功")
>                 }
>             }
>         }
>     </script>
>     <style>
>     
>     </style>
> 
> <template>
> 
> <div>
> 
> <h1>\{ \{title\}\}</h1>
> 
> <span>\{ \{rating\}\}</span>
> 
> <button @click="fun">点击收藏</button>
> 
> </div>
> 
> </template>
> 
> <script>
> 
> export default\{
> 
> name:"Movie",
> 
> props:\["title","rating"\],
> 
> data:function()\{
> 
> return\{
> 
> \}
> 
> \},
> 
> methods:\{
> 
> fun()\{
> 
> alert("收藏成功")
> 
> \}
> 
> \}
> 
> \}
> 
> </script>
> 
> <style>
> 
> </style>

>     <template>
>         <h3>hello</h3>
>     </template>
> 
> <template>
> 
> <h3>hello</h3>
> 
> </template>