案例—点击电影列表中一项，该项文字变红

案例—点击电影列表中一项，该项文字变红

思想：

• 需要定义一个数组来存放电影列表；

  movies: ['少年派', '匆匆那年', '夏洛特烦恼', '海王']
  

• 需要一个ul来显示电影列表；

• ul要监听鼠标点击事件，要为事件处理函数传入当前点击的电影的索引，从而判断点击的是哪个电影。

• 定义一个currentIndex变量来表示当前显示为红色的电影索引，当index==currentIndex时，class生效，字体显示为红色；

  //绑定class
  :class="{active:currentIndex===index}"
  //监听鼠标点击事件
  @click="liClick(index)"
  
  methods:{
        liClick(index){
          this.currentIndex=index
        }
      }
  

• 要为ul动态绑定一个class，当点击的class生效，从而字体显示为红色；

  完整代码为：

  <div id="app">
    <!-- 把电影列表先显示出来，要获得当前点击的索引，要绑定点击事件-->
    <ul>
      <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
        {{item}}
      </li>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        //  存放电影列表的数组
        movies: ['少年派', '匆匆那年', '夏洛特烦恼', '海王'],
        currentIndex: 0
      },
      methods: {
        liClick(index) {
          this.currentIndex = index
        }
      }
    })
  </script>