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

最新推荐文章于 2024-09-07 18:54:49 发布

原创最新推荐文章于 2024-09-07 18:54:49 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js框架创建简单网页的例子，该页面展示了一份早餐食品清单，并通过组件化的方式实现了数据绑定和列表渲染。

<!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>