Vue <一> 自定义组件，外部传入值

最新推荐文章于 2024-07-29 17:24:03 发布

c_c123

最新推荐文章于 2024-07-29 17:24:03 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/c_c123/article/details/72356972

版权

<!DOCTYPE html>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<body>  
  <div  id="app-7">
    <p >{{message}}</p>
    <ol>
        <breakfast v-for="item in groceryList" v-bind:foodlist="item"></breakfast>
    </ol>
  </div>

  <script src='https://unpkg.com/vue@2.0.5/dist/vue.js'></script>  
<script type="text/javascript">
    Vue.component('breakfast',{
        props:['foodlist'],
        template:'<li>{{foodlist.text}}</li>'
    })

    var app7 = new Vue({
        el:'#app-7',
        data:{
           message:"自xx助早餐",
           groceryList:[
            {text:"包子"},
            {text:"豆浆"},
            {text:"牛奶"}
           ]
        }
    })
</script>
</body>  
</html>