前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js class的妙用 下(核心)

vue.js class的妙用 下(核心)

作者头像
贵哥的编程之路
发布2021-03-02 15:44:40
3.2K0
发布2021-03-02 15:44:40
举报
文章被收录于专栏:用户7873631的专栏
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src='vue.min.js'></script>
	<title></title>
	<style type="text/css">
		body{background: #ccc;}
		div{width: 100px;height: 100px;}
		.red{background: red;}
		.shadow{box-shadow: 0 0 15px black;}
	</style>
</head>
<body>
	<input type="button"  value="changed" @click="set"/>
	<div :class="myDiv"></div>
	<script type="text/javascript">
			new Vue(
				{
					el:'body',
					data:{
						myDiv:['red','shadow']
					},
					methods:{
						set:function()
						{
							this.myDiv.length==1?this.myDiv.push('shadow'):this.myDiv.pop();
						}
					}
				}
			);
	</script>
</body>
</html>

解释:

核心;

在这里插入图片描述
在这里插入图片描述

意思是:因为

在这里插入图片描述
在这里插入图片描述

有两个, 第一步:没点击时是阴影的 第二步:点击时是2,所以去掉阴影。 第三步:再点击就加阴影(因为是1了,之前第二步去掉阴影了呀.)

效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src='vue.min.js'></script>
	<title></title>
	<style type="text/css">
		body{background: #ccc;}
		div{width: 100px;height: 100px;}
		.red{background: red;}
		.shadow{box-shadow: 0 0 15px black;}
		.animate{transition: 0.5s;}
	</style>
</head>
<body>
	<input type="button"  value="changed" @click="set"/>
	<div :class="myDiv"></div>
	<script type="text/javascript">
			new Vue(
				{
					el:'body',
					data:{
						myDiv:{
							'red':true,
							'shadow':true,
							'animate':true
						}
					},
					methods:{
						set:function()
						{
							this.myDiv.shadow=!this.myDiv.shadow;
						}
					}
				}
			);
	</script>
</body>
</html>

解释:

在这里插入图片描述
在这里插入图片描述

第一步:先true。所以阴影. 第二步:点击false,去掉阴影, 第三步;点击true,加阴影

效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解释:
  • 效果:
  • 解释:
  • 效果:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档