vue学习14-自定义组件添加属性 

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <script src='https://unpkg.com/vue/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
  <blog-list :books="books"></blog-list>
 </div>

 <script>
    Vue.component("blog-list",{
      props:{
        books:{
          type:Array
        }

      },
      template: `
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>书名</th>
              <th>作者</th>   
            </tr>
          </thead>
          <tbody>
            <tr v-for="(book,index) in books">
              <th>{{index+1}}</th>
              <td>{{book.title}}</td>
              <td>{{book.author}}</td>
            </tr>
          </tbody>
        </table> `


      })
 
     new Vue({
      el:'#app',
      data:{
        books:[{
          'title':"三国演义",
          'author':"罗贯中",
        },
        {
          'title':"水浒传",
          'author':"施耐庵",
        },
        {
          'title':"红楼梦",
          'author':"曹雪芹",
        },
        {
          'title':"西游记",
          'author':"吴承恩",
        }],
      }
    }
 )
</script>
</body>
</html>

 

posted @ 2021-12-29 00:04  空谷近心  阅读(225)  评论(0)    收藏  举报