在vue中点击按钮改变div样式
目标：如何点击按钮触发事件，改变div的颜色（样式）方法：通过三目运算符判断选择那个样式：代码：<!doctype html><html><head><title>div点击按钮改变样式</title><meta charset="utf-8" /><script src="https://cdn.jsdelivr.ne
·
目标：
如何点击按钮触发事件，改变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>
运行结果：
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)