如何优雅处理vue中的条件渲染

说到条件渲染，有些人会脱口而出v-if、v-show，你是否厌倦了if…else、switch嵌套，是否反感大量出现的||运算符，也许你需要了解一下vue的filters

基本操作

如果需要根据情况渲染不同数据，在条件允许的前提下，用filters代替v-if

<template>
    <div>
        {{msg | aisle}} // 实用过滤器进行模板绑定
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: '1'
        }
    },
    filters: {
        aisle (type) {
            let list = {	// 拒绝switch形式，以字面量代替
                '1': '过滤器的几种打开方式',
                'mamp': 'PHP运行环境',
                '业务': '展示业务逻辑代码'
            }
            return list[type] // 每一个过滤器都应该有返回函数
        }
    }
}
</script>

filters和data同级，在模板渲染过程中，如果想分情况渲染不同内容，往往可以省掉不必要的v-if以及重复代码

filter是否可以直接用于v-if中

测试代码

<template>
    <div v-if="msg | aisle"> // v-if接受的是值，而非表达式
        你又看见我啦
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: '1'
        }
    },
    filters: {
        aisle (type) {
            let list = {
                '1': true,
                '2': false,
                '3': true
            }
            return list[type]
        }
    }
}
</script>

**报错啦：**Property or method “aisle” is not defined

如果优雅的实现根据大量type选择性显示内容

<template>
    <div v-if="showMag(msg)"> // 接受函数的返回值
        你又看见我啦
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: '1'
        }
    },
    methods: {
        showMag (type) {
            let list = {
                '1': true,
                '2': false,
                '3': true
            }
            return list[type]
        }
    }
}
</script>

加载数据期间显示了静态页面怎么办

你是否遇到过，body数据正在加载，写死的静态footer已经展示，造成一种闪烁的假象，那么如何优雅的解决这个问题

<template>
    <div v-clock> // vue自带了v-clock来处理页面渲染，需要配合css使用
        <div 
            v-for="(item, index) in viewData"
            :key="index">
            {{item}}
        </div>
        <footer>我是footer</footer>
    </div>
</template>

<script>
export default {
    data () {
        return {
            viewData: ['梁朝伟', '张学友', '张信哲']
        }
    }
}
</script>

<style>
    [v-cloak] {
        display: none;
    }
</style>

如此操作就能解决大部分页面闪烁的问题，值得注意的是有一种情况v-clock会失效

当style通过@impor导入时，优于@import是页面加载完成后才开始加载，所以页面还是会闪烁

解决办法是通过link或者内联方式