消息关闭
    暂无新消息!

vue2.0中绑定类的一个问题

问题作者 : 瑞瑞2017-06-15发布
在vue2.0中,写了一个下边的程序,怎么那个类一直绑定不了呢
<style>
    .active {
        color: red;
    }
</style>
<body>
<div id="app">
    <table>
        <tr>
            <td v-for="item in head" @click="change" :class="{active:item.active}"
                    >{{item.name}}
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {            
            head: [{
                name: 'name'
            }, {
                name: 'age'
            }]
        },
        methods: {
            change: function () {
                this.head.map(function (item) {
                    item.active = true;
                    return item
                })
            }
        }
    })
</script>
</body>

1个回答

︿ 1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>

<script src="./common/vue@2.3.3.js"></script>
<div id="app">
    <table>
        <tr>
            <td v-for="(item,index) in head" @click="change(index)" :class="{active:item.active}"
            >{{item.name}}
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            head: [{
                name: 'name'
            }, {
                name: 'age'
            }]
        },
        methods: {
            change: function (index) {
                this.head=this.head.map(function (item,i) {
                    i===index&&(item.active = true);
                    return item
                })
            }
        }
    })
</script>
</body>
</html>