在页面上显示四个列表,初始时字体为黑色。首先浏览器直接显示列表,因为此时没有监听到click事件。当鼠标点击某一个列表时,Vue自动获取列表下标,并执行change函数,改变changeRed的值,此时当前列表的v-bind:class="{red: changeRed == index}"中的red为true,当前一项列表显示为红色。其余列表的changeRed == index为false,所以不显示红色。css1.1 字符串绑定1.2 对象绑定 和 数组绑定图示点击后图示点击后

利用Vue的v-for和v-bind实现列表颜色切换

利用Vue的v-for和v-bind实现列表颜色切换

利用Vue的v-for和v-bind实现列表颜色切换

利用Vue的v-for和v-bind实现列表颜色切换

利用Vue的v-for和v-bind实现列表颜色切换

利用Vue的v-for和v-bind实现列表颜色切换