关于Vue.js之v-for和v-bind实现列表颜色切换

需求：在页面上显示列表，默认第一行为红色。鼠标点击某一列表时，该列表的颜色变为红色，其余列表仍为黑色。代码实现：<body><div id="app"><ul><li :class="{active:isActive == index}" v-for="(m,index) in movies" v-on:click="b...

y1655171397

2605人浏览 · 2020-03-15 11:44:10

y1655171397 · 2020-03-15 11:44:10 发布

需求：

在页面上显示列表，默认第一行为红色。鼠标点击某一列表时，该列表的颜色变为红色，其余列表仍为黑色。

代码实现：

<body>
  <div id="app">
    <ul>
      <li :class="{active:isActive == index}" v-for="(m,index) in movies" v-on:click="btnClick(index)">{{index+1}}-{{m}}</li>
    </ul>
  </div>
  
  <script>
    const app=new Vue({
      el:'#app',
      data:{
        movies:["星际穿越","星球大战","星际迷航","颠倒爱情"],
        isActive:false,
        // isActive:-1,
      },
      methods:{
        btnClick:function(index){
          this.isActive=index;
        }
      }
    })
  </script>
</body>

效果如图：
点击前

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^