Vue---动态绑定CSS样式

最新推荐文章于 2024-07-16 07:16:59 发布

RN_David

最新推荐文章于 2024-07-16 07:16:59 发布

阅读量309

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/RN_David/article/details/106298520

版权

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>

RN_David

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---动态绑定CSS样式

标题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;
复制链接

扫一扫

专栏目录