在vue中点击按钮改变div样式目标：方法：

174 阅读 0 评论 115 点赞

我是靠谱客的博主笨笨手机，这篇文章主要介绍在vue中点击按钮改变div样式目标：方法：，现在分享给大家，希望可以做个参考。

目标：

如何点击按钮触发事件，改变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>