vue-自定义组件

博主： Likefr
发布时间：2021 年 05 月 20 日
572 次浏览
暂无评论
436字数
分类：前端笔记

<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"> 

    第一步数组数据
    第二步创建组件并使用组件
    第三步 使用组件并使用for遍历数组数据 使用bind绑定遍历出来的数据:item ——》 传递数据名
    第四步 添加props 获取item
<likefr v-for="item in items" v-bind:item="item">{{item}}</likefr>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("likefr",{
  props: ["item"],
    template: '<li>{{item}}</li>'
})
var vm=new Vue({
    el:"#app",
    data: {
        msg : "tEST",
        message : '',
        items: [
         "1",
         "12",
         "123"
        ]
    }
})

</script>
</body>
</html>

最后修改：2021 年 05 月 20 日