需求:
- 在页面上显示四个列表,初始时字体为黑色。
- 鼠标点击某一个列表时,该列表的颜色变为红色,其余列表仍为黑色。
代码实现:
<!-- css --><style>.red{color: red;}</style><!-- html --><divid="app"><ul><liv-for="item,index in movies":class="{red: changeRed == index}"v-on:click="change(index)">{{item}}</li></ul></div><!-- JavaScript --><scriptsrc="../JS/vue.js"></script><script>const app=newVue({
el:'#app',
data:{
movies:['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
changeRed:-1},
methods:{
change:function(index){this.changeRed=index;}}})</script>
代码解释:
- 首先浏览器直接显示列表,因为此时没有监听到click事件。
- 当鼠标点击某一个列表时,Vue自动获取列表下标,并执行change(index)函数,改变changeRed的值,此时当前列表的v-bind:class="{red: changeRed == index}"中的red为true,当前一项列表显示为红色。其余列表的changeRed == index为false,所以不显示红色。