vue 控件component
Posted otways
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 控件component相关的知识，希望对你有一定的参考价值。
<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的主要内容，如果未能解决你的问题，请参考以下文章