Header.vuehtml
<template > <div class="Header"> <h1>{{title}}</h1> </div> </template> <script> //js 邏輯部分 export default { name: 'Header', data() { return { title:"多組件嵌套demo" }; } } </script> <style scoped> .Header{ padding:10px; background-color: green } h1{ color: black; text-align: center } </style>
Footer.vuevue
<template > <div class="Footer"> <h1>{{copyright}}</h1> </div> </template> <script> //js 邏輯部分 export default { name: 'Footer', data() { return { copyright:"copyright333" }; } } </script> <style scoped> .Footer{ padding:10px; background-color:black } h1{ color: white; text-align: center } </style>
Users.vueapp
<template > <div class="users"> <ul> <!-- vue 遍歷須要key屬性綁定--> <li @click="val.isshow=!val.isshow" v-for="(val,index) in users" :key="index"> <h2>{{val.name}} </h2> <h3 v-show="val.isshow">{{val.wechat}} </h3> </li> </ul> </div> </template> <script> //js 邏輯部分 export default { name: 'users', data() { return { users:[ {name:"我是1",wechat:"1111",isshow:false}, {name:"我是2",wechat:"1111",isshow:false}, {name:"我是3",wechat:"1111",isshow:false}, {name:"我是4",wechat:"1111",isshow:false}, {name:"我是5",wechat:"1111",isshow:false}, {name:"我是6",wechat:"1111",isshow:false} ] }; } } </script> <style scoped> .users{ width: 100%; max-width: 1200px; margin: 40px auto; padding: 0 20px; box-sizing: border-box } ul{ display: flex; flex-wrap: wrap; list-style-type: none; padding: 0 } li{ flex-grow: 1; flex-basis: 200px; text-align: center; padding: 30px; border: 1px solid #222; margin: 10px; } </style>
App.vuessh
<template> <div id="app"> <Header/> <!--使用組件--> <Users/> <Footer/> </div> </template> <script> //註冊局部組件 //1 引入組件 import Users from './components/Users.vue' import Header from './components/Header.vue' import Footer from './components/Footer.vue' export default { name: 'app', components: { //2 註冊組件 Users, Header, Footer } } </script> <style> h1{ color:red; } </style>
頁面效果flex