1. <template>
    2.   <div id="app">
    3.     <!-- 3.向子组件传输数据 -->
    4.     <Time :times="ptimes" />
    5.   </div>
    6. </template>
    8. <script>
    9. // 1.引入组件
    10. import Time from "./components/time.vue";
    12. export default {
    13.   name: "App",
    14.   components: {
    15.     // 注册组件
    16.     Time,
    17.   },
    18.   data() {
    19.     return {
    20.       ptimes: ["一天", "一周", "一月", "一年"],
    21.     };
    22.   },
    23. };
    24. </script>
    26. <style>
    27. #app {
    28.   font-family: Avenir, Helvetica, Arial, sans-serif;
    29.   -webkit-font-smoothing: antialiased;
    30.   -moz-osx-font-smoothing: grayscale;
    31.   text-align: center;
    32.   color: #2c3e50;
    33.   margin-top: 60px;
    34. }
    35. </style>
    1. <template>
    2.   <div class="chooser-components">
    3.     <ul class="chooser-list">
    4.         <!-- :class 是动态class 满足nowIndex===index 则动态的添加上active样式 -->
    5.       <li
    6.         @click="clickHandle(index)"
    7.         :class="{ active: nowIndex === index }"
    8.         v-for="(item, index) in times"
    9.         :key="index"
    10.       >
    11.         {{ item }}
    12.       </li>
    13.     </ul>
    14.   </div>
    15. </template>
    17. <script>
    18. export default {
    19.   // 4.接收父组件传输过来的数据
    20.   props: ["times"],
    21.   data() {
    22.     return {
    23.       nowIndex: 0,
    24.     };
    25.   },
    26.   methods: {
    27.     clickHandle(index) {
    28.       this.nowIndex = index;
    29.     },
    30.   },
    31. };
    32. </script>
    34. <style scoped>
    35. li {
    36.   list-style-type: none;
    37. }
    39. .chooser-component {
    40.   position: relative;
    41.   display: inline-block;
    42. }
    44. .chooser-list li {
    45.   display: inline-block;
    46.   padding: 0 8px;
    47.   border: 1px solid #e3e3e3;
    48.   height: 25px;
    49.   line-height: 25px;
    50.   margin: 0 5px;
    51.   border-radius: 3px; /* 设置圆角弧度 */
    52.   align-items: center;
    53.   width: 60px;
    54.   cursor: pointer; /* 小手样式 */
    55. }
    57. .active {
    58.   background-color: #4fc08d;
    59.   border-color: #4fc08d;
    60.   color: #fff;
    61. }
    62. </style>