Vue实现组件功能
实现数组展示
<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <head> <script type="text/javascript" src='js/vue.js'></script> <script type="text/javascript"> window.onload = function () { new Vue({ el: '#my', components: { 'todo-item': { template: '#todo-item', data() { return { arr:[1,2,3,4,5] } } } } }); } </script> <template id="todo-item"> <div> <ul> <li v-for="v in arr">{{ v }}</li> </ul> </div> </template> </head> <body> <div id="my"> <todo-item></todo-item> </div> </body> </html>
组件全局注册
<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <head> <script type="text/javascript" src='js/vue.js'></script> <script type="text/javascript"> window.onload = function () { //全局 方式一 var c = Vue.extend({ template: '<div>hello world</div>' }); Vue.component('hello', c) //hello 名称 c模板字符串 new Vue({ el: '#my' }); } </script> </head> <body> <div id="my"> <hello></hello> </div> </body> </html>
方式B
<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <head> <script type="text/javascript" src='js/vue.js'></script> <script type="text/javascript"> window.onload = function () { Vue.component('hello', { template: '<div>hello world</div>' }); new Vue({ el: '#my' }); } </script> </head> <body> <div id="my"> <hello></hello> </div> </body> </html>
方式C
<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <head> <script type="text/javascript" src='js/vue.js'></script> <script type="text/javascript"> window.onload = function () { var B = { //组件的名称 template:'#my-b', data(){ return { title:'B组件' } } }; new Vue({ el: '#my', components:{ 'my-a':B } }); } </script> <template id="my-b"> <div> <h1>{{title}}</h1> </div> </template> </head> <body> <div id="my"> <my-a></my-a> </div> </body> </html>
Tab切换功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <script type="text/javascript" src='js/vue.js'></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-tit .active { color: #09f; border-bottom: 1px solid #09f; } .tab-con div { margin: 30px; } </style> <script> window.onload = function () { new Vue({ el: '#my', data: { lists: [{ title: 'List1', content: 'a111' }, { title: 'List2', content: 'a222' }, { title: 'List3', content: 'a3333' }, { title: 'List4', content: 'a4444' }, { title: 'List5', content: 'a55555' }], lists2: [{ title: '列表A', content: 'AAAA' }, { title: '列表B', content: 'BBBB' }], }, components: { // 局部组件 'my-tab': { //组件的名称 template: '#my-tab', data() { return { n: 0 } }, methods: { action: function (num) { this.n = num; } }, props: ['data', 'title'] //组件中父-子传参 } } }) } </script> <template id="my-tab"> <div> <ul class="tab-tit"> <li v-for="(v,index) in data" :class="n==index?'active':''" v-on:click="action(index)"> {{v.title}} </li> </ul> <div class="tab-con"> <div v-for="(v,index) in data" v-show="n==index"> {{v.content}} {{title}} </div> </div> </div> </template> </head> <body> <div id="my"> <my-tab :data="lists" :title="'hello'"></my-tab> <my-tab :data="lists2"></my-tab> </div> </body> </html>
B
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component 按钮</title> <script type="text/javascript" src='js/vue.js'></script> <style> </style> <script> window.onload = function(){ new Vue({ el:'#my', data:{ obj1:{title:'确定',color:'red'} }, components:{ // 局部组件 'my-btn':{ //组件的名称 template:'#my-btn', data(){ return { } }, props:['data'] //组件中父-子传参 } } }) } </script> <template id="my-btn"> <div> <button :style="{color:data.color}">{{data.title}}</button> </div> </template> </head> <body> <div id="my"> <my-btn :data="obj1"></my-btn> <my-btn :data="{title:'取消',color:'green'}"></my-btn> <my-btn :data="{title:'点击提交',color:'blue'}"></my-btn> </div> </body> </html>
组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>component</title> <script type="text/javascript" src='js/vue.js'></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-tit .active { color: #09f; border-bottom: 1px solid #09f; } .tab-con div { margin: 30px; } </style> <script> window.onload = function () { new Vue({ el: '#my', data: { flag: 'my-a' }, components: { // 局部组件 'my-a': { //组件的名称 template: '#my-a', data() { return { title: 'A组件' } } }, 'my-b': { //组件的名称 template: '#my-b', data() { return { title: 'B组件' } } } } }) } </script> <template id="my-a"> <div> <h1>{{title}}</h1> </div> </template> <template id="my-b"> <div> <h1>{{title}}</h1> </div> </template> </head> <body> <div id="my"> <!-- 动态组件 flag 判断的是组件的名称 --> <button @click="flag ='my-a'">A按钮</button> <button @click="flag ='my-b'">B按钮</button> <component :is="flag"></component> </div> </body> </html>
浙公网安备 33010602011771号