vue v-for循环列表被点击的li变红

最新推荐文章于 2024-06-11 09:57:30 发布

coca-ovo

最新推荐文章于 2024-06-11 09:57:30 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43682982/article/details/104201341

版权

vue v-for循环列表被点击的li变红

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <style>
        .red{
           color:red;
        }
    </style>
</head>
<body>

    <div id="app">
    	<ul>
    		<li v-for="(m,index) in movies" :class="{red:i===index}" @click="changered(index)">{{index}}-{{m}}</li>
    	</ul>
    </div>

	<script src="vue.js"></script>
    <script>
    	var app = new Vue({
    		el:'#app',
    		data:{
    			movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
                i:null
    		},
            methods:{
                changered:function(index){
                  /*  alert("被点击的是:"+index),*/
                    this.i=index
                }
            }
    	});
    </script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coca-ovo

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
vue v-for循环列表被点击的li变红

vue v-for循环列表被点击的li变红<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color:red; } ...
复制链接

扫一扫