https://github.com/vuejs/vue/...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<ul class="list-group">
<li class="list-group-item" :class="{ 'active': active(item) }" v-for="item in items" track-by="id" @click="toggle(item)">{{item.id}}</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.17/vue.js"></script>
<script>
'use strict';
new Vue({
el: '#app',
data: function () {
return {
items: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
],
selected: [],
}
},
methods: {
toggle: function (item) {
var index = this.selected.indexOf(item)
if (index === -1) {
this.selected.push(item)
}
else {
this.selected.splice(index, 1)
}
},
active: function (item) {
return this.selected.some(t => t === item)
},
},
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。