vue 点击操作当前的DOM
2017-05-31 本文已影响7014人
Jianshu9527
- jQuery中多个元素之间,想要获取当前点击的对象时,jQuery提供了$(this),来获取当前的对象.
使开发者可以方便的对当前的元素进行各种操作(类的添加和删除,同级元素的属性操作等...) - 在vue的开发中,同样提供了类似方法,让开发者在不使用jQuery情况下,也能轻松的对当前元素对象进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用vue</title>
<!-- js -->
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<!-- css -->
<style type="text/css">
li{
cursor:pointer;
}
.active{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
var vm = new Vue({
el:"#body",
data:{
course:[
{coursename:"数学",id:"1"},
{coursename:"语文",id:"2"},
{coursename:"英语",id:"3"},
{coursename:"历史",id:"4"}
],
nowIndex:0
},
methods:{
clickcourse:function(event,num){
var toggle = event.currentTarget;
this.nowIndex = num;
}
}
})
})
</script>
</head>
<body id="body">
<ul>
<li v-for='courses in course' @click="clickcourse($event,$index)" v-bind:class="{'active':nowIndex==$index}">
{{courses.coursename}}
</li>
</ul>
</body>
</html>
