Vue2.0 如何正确使用computed get&set？

Question

需求是用vue实现遍历一个数组实现隔行变色，代码如下：

<style>
    .odd {
        background: #fff;
    .even {
        background: #ccc;
    } 
</style>

<div id="app">
    <fieldset>
        <legend>Create New Person</legend>
        <span>Name:</span>
        <input type="text" id="name" v-model="name_new">
        <br>
        <span>Age:</span>
        <input type="text" id="age" v-model="age_new">
        <br>
        <span>Gender:</span>
        <select id="" v-model="gender_new">
            <option>Male</option>
            <option>Female</option>
        </select>
        <br>
        <button @click="Create()">Create</button>
        <br>
        <table border="1px" width="300px">
            <thead>
                <td>Name</td>
                <td>Age</td>
                <td>Gender</td>
                <td>Delete</td>
            </thead>
            <tbody>
                <!-- <tr v-for="(person, index) in people" :class="index%2==0?'even':'odd'"> -->
                <tr v-for="(person, index) in people" :class=" classState ">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.gender }}</td>
                    <td><button @click="Delete(index)">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            classJudge: '',
            name_new: '',
            age_new: '',
            gender_new: 'Male',
            people: [
                {
                    name: 'Jack',
                    age: '30',
                    gender: 'Male'
                },
                {
                    name: 'Rose',
                    age: '27',
                    gender: 'Female'
                },
                {
                    name: 'Chris',
                    age: '46',
                    gender: 'Male'
                },
                {
                    name: 'Faya',
                    age: '19',
                    gender: 'Female'
                }
            ]
        },
        methods: {
            Create: function (){
                this.people.push({
                    name: this.name_new,
                    age: this.age_new,
                    gender: this.gender_new
                })
            },
            Delete: function(index){
                this.people.splice(index, 1);
            }
        },
        computed: {
            classState: {
                get: function(){
                    return this.classJudge
                },
                set: function(index){
                    if (index%2==0) {
                        this.classJudge = even
                    } else {
                        this.classJudge = odd
                    }
                }    
            }    
        }
    })
</script>

现在的问题是用method或者直接在v-bind:class里用三元表达式都能实现，但是computed怎么都出不来；网上一搜发现computed get里不能使用传参，于是配合用了set，然而还是不显示变色效果，且class为空：

求教大神们这种写法哪里出了问题？还有更好的computed解决方法么？

Answer 1

用computed好像无解，因为想不出办法把 item或者index和computed属性联系起来。

用三元算了，简单

<template>
    <div class="hello">
        <template v-for='(item,index) in people'>
            <div :class='[index%2 === 0 ? odd : even ]'>
                {{item.name}}
            </div>
        </template>
    </div>
</template>

<script>

export default {
    name: 'hello',
    data() {
        return {
            odd: 'odd',
            even: 'even',
            people: [
                {
                    name: 'Jack',
                    age: '30',
                    gender: 'Male'
                },
                {
                    name: 'Rose',
                    age: '27',
                    gender: 'Female'
                },
                {
                    name: 'Chris',
                    age: '46',
                    gender: 'Male'
                },
                {
                    name: 'Faya',
                    age: '19',
                    gender: 'Female'
                }
            ]
        }
    }
}
</script>

<style scoped>
.odd {
    background: red;
}

.even {
    background: green;
}
</style>

Answer 2

 :class=" classState = index "

这样？？

Answer 3

computed函数带参问题，可以这样处理。

template里面这样调用,

:class="classState(index)"

computed这样写，内部使用return一个function的方式接收参数来做处理即可。

classState(){
    return function(index){
         //根据index不同值, return对应的class名称
    } 
}