代码实现过程，主要使用 v-bind 就是 : 符号，来实现原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.static {
width: 100px;
height: 100px;
}
.bg_color {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div>
<ul v-for="(value,index) in values">
<li @click="cg_current_index(index)" :class="{'bg_color':current_index==index}">
{{value.name}}
</li>
</ul>
</div>
</div>
<script>
const app = {
data() {
return {
message: 'RUNOOB!!',
current_index:-1,
values: [
{id: 1, name: "选项一"},
{id: 2, name: "选项二"},
{id: 3, name: "选项三"},
{id: 4, name: "选项四"},
{id: 5, name: "选项五"}
]
}
},
methods: {
cg_current_index(index) {
this.current_index = index
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
