码迷,mamicode.com
首页 > 其他好文 > 详细

vue 控件component

时间:2019-08-18 15:58:15      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:有一个   initial   device   nload   ini   xtend   turn   address   div   

<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script>
       window.onload=function(){
           //组件
           var myComp = Vue.extend({
               //模板:必须有一个根节点、
               template:‘<h1>hello comPonent</h1>‘
           })
           //规范命名 连接符 -
           Vue.component(‘hello‘,myComp);
           //方式二:
           Vue.component(‘my-component‘,{
               template:‘<h2>张。。。</h2>‘
           })
           new Vue({
            el: "#app",     
            data: {
                
            },
            components:{
                ‘my-address‘: {
                    template:‘<h2>张。。。</h2>‘
                },
                ‘my-address2‘: {
                    template:"#myAddress2",
                    data:function(){
                        return {
                            title: "title",
                            list:[1,2,3,4]
                        }
                    }
                },
                ‘my-tab‘: {
                    template :"#myAddress3",
                    data:function(){
                        return {
                            tabtitil: [‘标题一‘,‘标题二‘,‘标题三‘,],
                            tabContent: [‘a‘,‘b‘,‘c‘],
                            cur2: 1,
                        }
                    }
                }
            }
         })
       }
       </script>
       <style>
            ul,li {
                padding: 0;margin: 0
            }
            .tab-tit li {
                padding: 10px 15px;
                text-align: center;
                list-style: none;
                cursor: pointer;
                display: inline-block;
            }
            .tab-con li {
                padding: 10px 15px;
                text-align: center;
                list-style: none;
                cursor: pointer;
                display: inline-block;
            }
        </style>
        <template id="myaddress2">
            <div>
                <p>{{title}}</p>
                <ul>
                    <li v-for="(v,i) in list">{{v}}</li>
                </ul>
            </div>
        </template>
        <template id="myAddress3">
             <div>
                <ul class="tab-tit">
                    <li v-for="(v,i) in tabtitil" @click="cur2=i" >{{v}}</li>
                </ul>
                <ul class="tab-con">
                    <li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li>
                </ul>
            </div>
        </template>
    </head>

    <body>
        <div id="app">
           <hello></hello>
           <my-component> </my-component>
           <my-address></my-address>
           <my-address2></my-address2>
           <my-tab></my-tab>
        </div>
    </body>
</html>

  

vue 控件component

标签:有一个   initial   device   nload   ini   xtend   turn   address   div   

原文地址:https://www.cnblogs.com/otways/p/11372299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!