Vue官方文档
https://cn.vuejs.org/v2/guide…
1 2 3 | <div></div>可以简写成<div></div> |
class绑定
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 61 62 63 64 65 | <!-- * @Author: [you name] * @Date: 2021-10-08 15:15:52 * @LastEditors: [you name] * @LastEditTime: 2021-10-08 22:46:18 * @Description: --> <title>Document</title> /* 点击前的样式 */ .class1 { background-color: #fff; color: #333; } /* 点击之后的样式 */ .class2 { background-color: #f52819; color: #fff; } /* 给按钮设置样式 */ button { width: 80px; height: 40px; border-radius: 5px; border: 2px solid rgb(179, 167, 167); background-color: #fff; } <div id="app"> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div> // 第二种方法 let vm = new Vue({ el:'#app', data:{ isYes1:true, isYes2:true, isYes3:true, }, methods:{ handler1(){ this.isYes1 = false, this.isYes2 = true, this.isYes3 = true, console.log('第一个点击事件'); }, handler2(){ this.isYes2 = false, this.isYes1 = true, this.isYes3 = true, console.log('第二个点击事件'); }, handler3(){ this.isYes3 = false, this.isYes2 = true, this.isYes1 = true, console.log('第三个点击事件'); }, } }) |
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 | <!-- * @Author: [you name] * @Date: 2021-10-08 15:15:52 * @LastEditors: [you name] * @LastEditTime: 2021-10-08 22:54:40 * @Description: --> <title>Document</title> /* 给按钮设置样式 */ button { width: 80px; height: 40px; border-radius: 5px; border: 2px solid rgb(179, 167, 167); background-color: #fff; } <div id="app"> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div> let vm = new Vue({ el: '#app', data: { // 设置一个数据来进行判断，其初始值设为空字符串，就会显示原始样式 isActive: '', // 在数据模型中设置经点击后要变换的样式，这里声明一个对象，用在按钮的绑定上,点击后切换的样式 styCss: { background: 'red', color: 'white' } }, methods: { // 为点击事件实现三按钮之间的互斥效果，即点击一个按钮，该按钮的样式改变， //其他的不变，点击另一个时，前一个按钮的样式还原，当前按钮样式改变， //那么就需要在点击方法中添加将目标源元素的文本值赋予需要进行判断的数据时， //当点击的按钮的内容和判断的条件一样时，成功触发该点击事件，实现切换并且改变样式的效果。 changeHandler(event) { this.isActive = event.target.innerText } } }) |
以上就是Vue–分别运用class绑定和style绑定，通过点击实现样式的切换的详细内容，更多关于Vue-运用class style绑定点击样式切换的资料请关注IT俱乐部其它相关文章！
