vue（class案例）

最新推荐文章于 2022-03-28 23:20:01 发布

小青龙8085

最新推荐文章于 2022-03-28 23:20:01 发布

阅读量95

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103227973

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

这是一个案例点击哪一个，哪一个就会变红

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

		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<ul>
				<li v-for="(i , index) in movies" :class="{isActive:currentId===index}" @click="onTap(index)" >{{index}}-{{i}}</li>
			</ul>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					currentId:0,
					movies:["海王","海尔兄弟","海贼王","海神唐三"]
                },
                methods:{
                    onTap(index){  
						this.currentId=index;
                    }
                }
            })
        </script>
    </body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue（class案例）

这是一个案例点击哪一个，哪一个就会变红<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .isActive{ color:red; }...
复制链接

扫一扫

专栏目录