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

Wang-ccnu 2017-06-14 10:01:36
在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>
...全文
389 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
我叫陈小皮。 2017-07-12
  • 打赏
  • 举报
回复
(item,index) in head item和index就代表head的键值,而下面data中head对象并没有active这个属性,所以item.active估计会报错的
Icey丶 2017-07-11
  • 打赏
  • 举报
回复
开始的时候在data里给每个item加一个为空的actice 再去change
似梦飞花 2017-06-15
  • 打赏
  • 举报
回复

<!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>

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧