<!--
* @description 参数1
* @fileName shoppint
* @author userName
* @date 2021-06-12 17:02:03
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shoppint</title>
<style>
.active{
color: red;
}
</style>
<script crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg=="
src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js">
</script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
{{ item }} -{{index}}-{{currentIndex}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
message:'Hello Vue',
movies:["赵钱孙李","周吴郑王","冯陈褚卫","蒋沈韩杨"],
currentIndex:0
}
},
methods: { // 方法
liClick(index){
this.currentIndex = index;
}
}
});
</script>
</body>
</html>