自定义组建

2020-06-05
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue-001</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- v-for循环自定义标签,v-bind绑定里面带引号的item为前边item的数据像,使用v-bind绑定模版中的item(props) -->
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script type="text/javascript">
    // 自定义标签
      Vue.component("my-component-li",{
        // 数组中放参数,接受到item参数
        props: ['item'],  
        // 自定义的标签模版为li
        template: "<li>{{item}}</li>"
      });
      var misterzhang = new Vue({
        el:'#app',
        // 数据
        data: {
          items: ["zhangsan","lisi","wangwu"]
        }
      });
    </script>
  </body>
</html>


标题:自定义组建
作者:张范
地址:http://misterzhang.top/articles/2020/06/05/1591339258885.html