目标:
如何点击按钮触发事件,改变div的颜色(样式)方法:
通过三目运算符判断选择那个样式:
代码:
<!doctype html><html><head><title>div点击按钮改变样式</title><meta charset="utf-8" /><script src="/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>
运行结果: