老师使用style添加样式如何实现切换功能吗？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!-- 使用对象对象绑定样式练习 --><!-- <div id="app"> <button @click="btnStyle" :class="{btnStyleOne: isActivated, btnStyleTwo: isActivated2}">点我</button> </div> <script> var vm = new Vue({ el: '#app', data: { isActivated: true, isActivated2: false }, methods: { btnStyle(){ if(this.isActivated){ this.isActivated2 = true; this.isActivated = false; }else{ this.isActivated2 = false; this.isActivated = true; } } } }) </script> --> <!-- 使用class的数组绑定样式 --><div id="app"><button :class="[btnStyle]" @click="btnStyles">点我</button></div><script>var vm = new Vue({el: '#app',data: {btnStyle:'btnStyleOne'},methods:{btnStyles(){this.btnStyle = this.btnStyle === "btnStyleOne" ? "btnStyleTwo" : "btnStyleOne";}}})</script>.btnStyleOne{background-color: blueviolet;border:none;font-size: 20px;color:#fff;}.btnStyleTwo{background-color: red;border:2px solid #000;font-size: 30px;color: #000;} |
24
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧