Vue---动态绑定CSS样式

vue 专栏收录该内容
7 篇文章 0 订阅

标题Vue之动态绑定CSS样式

效果图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
				border: #ddd solid 1px;
				width: 200px;
				text-align: center;
				margin: 10px;
				box-shadow: 0 0 10px #ddd;
				border-radius: 10px;
				padding: 5px 0;
			}
			.active {
				background-color: red;
				color: aliceblue;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li :class={active:index==isActive} @click="checkItem(index)" v-for="(m,index) in movies">{{m}}---{{index}}</li>
			</ul>
		</div>	
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					movies:['盗墓笔记','降魔的','斗罗大陆','火影忍者','二龙湖的爱情故事','老九门'],
					isActive:-1,
				},
				methods:{
					checkItem(index){
						 this.isActive=index;
					}
				}
			})
		</script>
	</body>
</html>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值