1. 使用v-for 遍历输出 内容
2. 设置点击事件，单机li标签时，将li的索引值存放起来
3. 通过v-bind的对象调用方式进行 li 的样式更改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
<style >
.liClinkClass {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--开始时第一条红色 点击谁谁变成红色-->
<!--展示列表-->
<ul>
<li v-for="( m , index ) in movies"
v-on:click="li_click(index, m)"
v-bind:class="{ 'liClinkClass' : isoKIndex == index }">{{ index + 1 }} - {{ m }} </li>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
movies:[ "电影一" , "电影二" , "电影三" , "电影四" , "电影五" ],
isoKIndex:0,
},
methods:{
li_click : function(data,item){
this.isoKIndex = data;
console.log("点击了："+item);
}
}
});
</script>
</body>
</html>