<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
$event 是指目前觸發的是什麼事件（滑鼠事件，鍵盤事件）
$event.target 則指的是事件觸發的目标，即哪一個元素觸發了事件，這就直接擷取該dom元素
-->
<div id="app">
<ul>
<li v-for="(m,index) in movies"
:key = "index"
v-on:click="setDate($event)"
:tabindex='index'
>{{index}}-{{m}}
</li>
</ul>
</div>
<!-- 引入vue.js 檔案-->
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
movies: ['海王', '海爾兄弟', '火影忍者', '黑貓警長'],
tabIndex:'0'
},
methods:{
setDate(e) {
// 問題待解決：不清楚e.currentTarget 與 e.target兩者差別
// 問題已解決：
/*
* 通常情況下target和currentTarget是一緻的
* 就在父子嵌套的關系中，父元素綁定了事件，
* 單擊了子元素（根據事件流，在不阻止事件流的前提下他會傳遞至父元素，
* 導緻父元素的事件處理函數執行），
* 這時候currentTarget指向的是父元素，因為他是綁定事件的對象，
* 而target指向了子元素，因為他是觸發事件的那個具體對象
* */
console.log(e.currentTarget);
console.log(e.target);
this.tabIndex = e.currentTarget.getAttribute('tabIndex');
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="vue">
<ul>
<li v-for="(item,index) in movies"
v-on :class ="{active:currntIndex === index}"
@click="liClivk(index)"
>
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#vue',
data: {
movies: ['嘿嘿嘿', '白白白', '黃黃黃'],
currntIndex: 0
},
methods: {
liClivk(index) {
this.currntIndex = index
}
}
});
</script>
</body>
</html>
![Django之驗證碼（十七）驗證碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)