微信小程序开发服务_使用Vue的v

利用Vue的v-for和v-bind实现列表颜色切换       这篇文章主要介绍了利用Vue的v-for和v-bind实现列表颜色切换，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在页面上显示四个列表，初始时字体为黑色。

鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。

代码实现：

 !-- css -- 
 style 
 .red{
 color: red;
 /style 
 !-- html -- 
 div id="app" 
 li v-for="item,index in movies" : v-on:click="change(index)" {{item}} /li 
 /ul 
 /div 
 !-- JavaScript -- 
 script src="../JS/vue.js" /script 
 script 
 const app = new Vue({
 el: '#app',
 data: {
 movies: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
 changeRed: -1
 methods: {
 change:function (index) {
 this.changeRed=index;
 /script 

代码解释：

首先浏览器直接显示列表，因为此时没有监听到click事件。

当鼠标点击某一个列表时，Vue自动获取列表下标，并执行change(index)函数，改变changeRed的值，此时当前列表的v-bind: 中的red为true，当前一项列表显示为红色。其余列表的changeRed == index为false，所以不显示红色。

补充知识：vue学习(绑定class、v-bind:style(对象语法、数组语法))

vue 属性绑定

css

 .class0{
 color: red;
 font-size: 10px;
 .class00{
 color: blue;
 font-size: 70px;
 .class2{
 color: yellow;
 font-size: 30px;
 .class3{
 color: indianred;
 .class4{
 font-size: 30px;

1 class绑定

1.1 字符串绑定

 div id="app1" 
 可以绑定一个默认class 字符串绑定class
 p : xxxx是字符串 /p 
 button @click="updates1" 点击 /button 
 /div 

图示

点击后

2 style 绑定

 div id="app3" 
 div :style="{ color: activeColor, fontSize: fontSize + 'px' }" Style 绑定1 例如 :style="{ color: activeColor, fontSize: fontSize + 'px' }" /div 
 div : Style 绑定2(绑定到一个样式对象通常更好) 例如 : /div 
 div : Style 绑定3(数组语法) 例如 : /div 
 button @click="updates4" 点击 /button 
 /div 

图示

点击后

以上这篇利用Vue的v-for和v-bind实现列表颜色切换就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。