在vue中点击按钮改变div样式

最新推荐文章于 2024-03-01 19:44:09 发布

hello big_bear

最新推荐文章于 2024-03-01 19:44:09 发布

阅读量4.1k

点赞数 4

分类专栏： vue 文章标签： Vue JavaScript 三目运算符样式切换按钮事件

本文链接：https://blog.csdn.net/big_beer/article/details/115704214

版权

vue 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

目标：

如何点击按钮触发事件，改变div的颜色（样式）

方法：

通过三目运算符判断选择那个样式：
代码：

 <!doctype html>
<html>
     <head>
     <title>div点击按钮改变样式</title>
      <meta charset="utf-8" />
	 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     </head>
     <body>
		 <div id="myVue">
			 <div :class="istrue?'red':'yellow'"></div><!-- 通过三目运算符进行判定 -->
			 <br>
			 <button @click="istrue=!istrue">改变div样式</button><!-- 点击按钮istrue取反 -->
		 </div>
     </body>
	 <style>
		 .red{
			 width: 500px;
			 height: 500px;
			 background-color: red;
		 }
		 .yellow{
			 width: 200px;
			 height: 200px;
			 background-color: yellow;
		 }
	 </style>
	<script>
		new Vue({
			el:'#myVue',
			data:{
				istrue:true //定义一个值,true变红色,false变黄色
			}
		})
	</script>
</html>