Vue框架中v-for和v-bind指令实现简单的动态class
Vue框架中v-for和v-bind指令实现简单的动态class，鼠标点击按钮实现class动态变红
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<url>
<!--<li v-for="m in movies">{{m}}</li>--><!--m变量 in 数组-->
<button class="title" :class="{'active': name==m}" @click="onclick(m)" v-for="(m, index) in movies">{{m}}</button>
</url>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//message: '你好！',
movies: ['海贼王', '火影忍者', '进击的巨人', '黑色四叶草'],
name: ''
},
methods:{
onclick: function (index) {
this.name = index
}
}
})
</script>
</body>
</html>
效果图：
我这里直接遍历的数组，定义name，没有定义数组下标可以在进到页面时，不点击不发生动态效果。
如果定义数组下标，则下标从0开始，进入页面会直接显示下标为0的数组内容为动态效果。
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
