遍历数组，显示所有数组元素。点击文字，被点击的一行变成红色，其他变成黑色

记录一个简单的Vue练习
练习：遍历数组，显示所有数组元素。点击文字，被点击的一行变成红色，其他变成黑色。

代码如下：

<div id="root">
        <ul>
            <li v-for='(item,index) in movies' 
            	v-bind:class="{redC:isRed(index)}"
           	 	@click='changeI(index)'>{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                movies: ['盗梦空间', '星际穿越', '信条', '了不起的盖茨比'],
                currentIndex:0,
            },
            methods: {
                isRed(index) {
                	// 刚开始的时候，令第一行的元素变成红色
                    return this.currentIndex === index
                },
                changeI(index){
                	// 将点击的索引号index赋值给currentIndex
                    this.currentIndex=index  // 注意 赋值运算符=  比较运算符==  全等运算符===
                }
            }
        })
    </script>

因为这个练习很简单，可以直接用<script src="vue.js"></script>引入vue文件，开发时建议使用开发版本
v-for 循环遍历数组，可以获得子元素和索引号
v-bind: 简写 : 动态绑定元素class属性
v-on: 简写 @ 监听DOM事件