vue.js开发记账（9）统计页面

写统计页面、样式

• 页面效果图：

• 支出收入在Money页面做过这个tag
• 假如直接改的话，因为有scoped精准样式的干预，不能修改，以免影响其他样式
• 用deep语法(>>>)改样式，写法为/deep/或::v-deep
• 但是如果li有很多时，就要精准加样式，把Types.vue组件再封装，classPrefix

//Types.vue
<template>
    <div>
        <ul class="types">
            <li :class="{[classPrefix+'-item']:classPrefix,selected:value ==='-'}"
                @click="selectType('-')">支出
            </li>
            <li :class="{[classPrefix+'-item']:classPrefix,selected:value ==='+'}"
                @click="selectType('+')">收入
            </li>
        </ul>
    </div>
</template>

//Statistics.vue
<template>
    <Layout>
        <Types class-prefix="zzz" :value.sync="yyy"/>
    </Layout>
</template>

<script lang="ts">
    import Types from '@/components/Money/Types.vue';
    export default {
        name: 'Statistics',
        components: {Types},
    };
</script>

<style scoped lang="scss">
    ::v-deep .zzz-item{       //意思是.x深入到里面的组件
  
    }
</style>