vue点击按钮切换样式

点击全部切换样式

给一个click点击事件，动态样式绑定两个class（vue官网：绑定class的对象语法）

<view class="type round-15" @click="whole" :class="{type:ys1,type_tips:ys2}">全部</view>

用true和false判断

ys1:true,
ys2:false,

方法：

whole(){// 当点击第一次时，ys1从true变为false,Style样式type就会隐藏// 再点击第二次的时候由false,变为true,显示样式// !为取反this.ys1 = !this.ys1this.ys2 = !this.ys2
},

<style>.type{background: #f0f0f0;color: #7c7c7c;}.type_tips{background: #17a4fc;color: #fff;   }
</style>

vue点击按钮切换样式相关推荐

vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
jquery点击按钮切换样式
实现点击两个按钮的切换 css: .fui-cell-info {display: flex;}.fui-cell-a {padding: 4px 18px;border: 1px solid #68 ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
jquery 点击事件切换样式
jquery 点击事件切换样式 $('#FatherName').on('click', '.ClassName', function(e){$('.ClassName').removeClass(' ...
vue两个按钮切换_vue点击循环添加列表点击来回切换
1.v-on:绑定一个事件后面放事件名简写 @事件名="函数" 例如: 按钮 var vm=new Vue({ el:'#itany', data:{ msg:'hello' ...

vue点击按钮切换样式

点击全部切换样式

vue点击按钮切换样式相关推荐

最新文章

热门文章

vue点击按钮切换样式

点击全部 切换样式

vue点击按钮切换样式相关推荐

最新文章

热门文章

点击全部切换样式