关于Vue

最新推荐文章于 2024-05-21 09:26:22 发布

RemixGdc

最新推荐文章于 2024-05-21 09:26:22 发布

阅读量360

点赞数

分类专栏：前端

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

      
      
       
       <div id="app-7">
      
      
      
        
       
       <ol>
      
      
      
          
       
       <!-- Now we provide each todo-item with the todo object    -->
      
      
      
          
       
       <!-- it's representing, so that its content can be dynamic -->
      
      
      
          
       
       <todo-item v-for="item in groceryList" v-bind:todo="item">
       
       </todo-item>
      
      
      
        
       
       </ol>
      
      
      
      
       
       </div>

      
      
       
       Vue.component(
       
       'todo-item', {
      
      
      
        
       
       props: [
       
       'todo'],
      
      
      
        
       
       template: 
       
       '<li>{{ todo.text }}</li>'
      
      
      
      
       
       })
      
      
      
      
      
      
       
       var app7 = 
       
       new Vue({
      
      
      
        
       
       el: 
       
       '#app-7',
      
      
      
        
       
       data: {
      
      
      
          
       
       groceryList: [
      
      
      
      
       
             { 
       
       text: 
       
       'Vegetables' },
      
      
      
      
       
             { 
       
       text: 
       
       'Cheese' },
      
      
      
      
       
             { 
       
       text: 
       
       'Whatever else humans are supposed to eat' }
      
      
      
      
       
           ]
      
      
      
      
       
         }
      
      
      
      
       
       })