需求 有一个数组,使用v-for遍历出来后,点击其中一个使他具有一个属性(颜色变红)
使用vue
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="./vue.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- click一定要传递当前li的index值 -->
<li v-for="(item, index) in items" :key="index" @click='chuli(index)' :class='{active:currentIndex==index}'>
{{index}}--{{item}}
</li>
</ul>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
items: ['海王', '进击的巨人', '火影', '境界的彼方'],
currentIndex: 0
},
methods: {
chuli: function (index) {
this.currentIndex = index
}
}
});
</script>
</body>
</html>
使用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
</ul>
</div>
<script>
var arr = ['海王', '进击的巨人', '火影', '境界的彼方'];
for (let i = 0; i < arr.length; i++) {
$('#app ul').append('<li>' + arr[i] + '</li> ')
}
$('#app ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</body>
</html>
相比之下,vue有更简便的语法,而且逻辑更清晰,jQuery动态插入值时并没有vue这么方便