Vue.js中的条件2

Question

无法找到轻松任务的决定 我有组件：

<template>
    <div>
        <a 
            v-for="social in socials" 
            href=""
        >
            <i class="icon-mail"></i>
        </a>
    </div>
</template>

<script>
    export default{
        mounted() {
            console.log('Component SocialButton.vue mounted');
        },

        data() {
            return {
                socials: [
                    { 
                        name: 'Email', 
                        type: 'mail', 
                        value: 'support@support.com',
                    },
                    { 
                        name: 'Phone', 
                        type: 'bell', 
                        value: '000 000 000 000',
                    },
                    { 
                        name: 'Facebook', 
                        type: 'facebook', 
                        value: 'facebook',
                    },
                    { 
                        name: 'Twitter', 
                        type: 'twitter', 
                        value: 'twitter',
                    },
                    { 
                        name: 'Pinterest', 
                        type: 'pinterest', 
                        value: 'pinterest',
                    }
                ]
            }
        }
    }
</script>

所以，如果我的“类型”等于“mail”或“bell”，我应该渲染class =“hidden-md-down”

或者如果type等于另一个字符串，我应该渲染class =“social-button sb - {{type}} shape-none sb-dark”

Thx：）

Answer 1

我会使用计算属性。

在您的脚本中，您将计算该类：

<script>
    export default {
        name: 'connection-status-item',
        computed: {
            statusClass: function () {
                return {
                    'green--text': this.connector.failed <= 1,
                    'yellow--text': this.connector.failed >= 2 && this.connector.failed <= 5,
                    'red--text': this.connector.failed >= 6
                }
            }
        }
    }
</script>

然后，您可以使用v-bind：

进行渲染

<template>
    <v-icon dark v-bind:class="statusClass">fa-check-circle-o</v-icon>
</template>