vue-点击按钮取反

最新推荐文章于 2023-12-14 17:29:37 发布
最新推荐文章于 2023-12-14 17:29:37 发布
阅读量8.2k 收藏
点赞数 2
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45737446/article/details/110071708
版权
本文介绍如何在Vue中实现按钮状态根据点击取反。通过创建两个按钮并设置相反的显示条件，达到点击切换显示效果。关键在于设置判断条件为需要隐藏的状态，例如下架按钮显示条件为商品未下架（状态0），上架按钮则为已下架（状态1）。
摘要由CSDN通过智能技术生成

vue页面展示 状态与点击按钮相反

如图:
在这里插入图片描述
开始做得时候，一直想得是写一个就行了，然后迷茫，第二天直接有了新的想法，写两个按钮，符合哪个条件，显示哪个按钮。
在这里插入图片描述

注意：
判断条件是与要显示得结果相反的（下架按钮的判断条件0，上架按钮的判断条件1，其中0是上架，1是下架）

代码：

		  <el-button
            v-if="scope.row.launchType == '0
最低0.47元/天 解锁文章
学习·笔记
关注
专栏目录
vue-print-nb 兼容低版本浏览器
11-28
在开发过程中，我们经常需要处理各种打印需求，这正是 `vue-print-nb` 插件的作用所在。`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-...
vue3 事件处理 @click
一步一个脚印，踏实努力，向着目标前进
08-17 1万+
在Vue 3中，事件处理可以通过@click指令来实现。@click指令用于监听元素的点击事件，并在触发时执行相应的处理函数。下面是一个简单的示例，展示了如何在Vue 3中处理点击事件：
vue button之反转信息的使用
敲代码无敌小奶龙的博客
10-12 847
学会如何使用button进行信息的反转
Vue基础-vue指令
Autumnxwq的博客
10-16 1080
Vue 基础指令
翻转世界案例
m0_73951790的博客
12-14 529
逆转世界
@vue/cli脚手架
qq_52963857的博客
06-13 836
@vue/cli脚手架介绍,目录和代码分析,项目架构了解, 自定义配置,单vue文件讲解,@vue/cli 欢迎界面清理2.7 模板语法2.8 文本插值2.9 原始 HTML3.0 v-once指令3. Vue指令3.0_vue基础-插值表达式3.1_vue基础-MVVM设计模式3.2_vue指令-v-bind,动态更改属性的值3.3vue指令-v-on3.4_v-on事件对象3.5-v-on修饰符3.6-v-on按键修饰符3.7翻转世界 3.8vue指令 v-model3.9 v-model修饰符
vue3实现鼠标点击卡片翻转效果
hsyq586的博客
11-17 1285
当点击该按钮时，会调用flipAllCards方法，遍历cards数组，并将每个卡片的flipped属性取反，从而实现全部卡片同时翻转，并且在flipAllCards 方法中添加逻辑来检查卡片的当前状态，如果已经是反面，则不进行翻转。每个卡片都有front和back两个面，初始状态下都是正面（flipped: false）。通过点击卡片，我们可以改变对应卡片的flipped属性，从而实现翻转动画。使用v-bind:class指令来动态切换卡片的类名，根据flipped属性的值来决定显示正面还是反面的内容。
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-ydui使用文档
01-11
2. **丰富的组件库**：Vue-YDUI 包含了如按钮、表单、表格、轮播图、提示、加载、导航、布局等多种常见UI元素，满足各种项目需求。 3. **易于集成**：Vue-YDUI是基于Vue.js构建的，因此与Vue生态系统兼容良好，可以...
vue-fab-Vue浮动操作按钮。-Vue.js开发
05-27
Vue的FAB浮动操作按钮。 该组件支持多个操作按钮，因此您可以根据需要添加任意多个操作。 它将触发事件t FAB Vue浮动动作按钮。...实时演示安装npm install vue-fab-保存依赖项在文档的头部包含以下样式表 和
vue框架vue-next-admin-master.zip
最新发布
04-04
Vue-next-admin-master 很可能使用 Element UI 提供的组件，如表格、按钮、表单等，以快速搭建界面。 7. **Markdown**：项目中可能包含 Markdown 文件，用于编写文档或说明，Markdown 是一种轻量级的标记语言，易于...
Vue--常用指令总结
ShuaideryiP的博客
09-24 379
1. Vue语法--插值表达式 1.1 目标 学习插值表达式, 在DOM中插入内容 1.2 学习 又叫: 声明式渲染/文本插值/大胡子语法 语法: {{ 表达式 }} 例子： <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}&l
点击事件（Button等）变量取反技巧
科技向善
12-25 6373
<script> let app = new Vue({ el: '#app', data: { message: 'Hello World', boolActive: true }, methods: { buttonClick: function() { this.isActive...
vue 实现按钮多选和反选
qq_35430000的博客
09-04 4117
效果如下：点击选中，再次点击反选，我做的项目是弹框，请按实际需要去掉弹框样式，其中@c-main代表的颜色是 #c6ae6c 代码如下： &lt;template&gt; &lt;!--推荐人弹窗--&gt; &lt;div class="sourcePop"&gt; &lt;div class="sourcePopContent"&gt; ...
【vue的基础使用】
qq_51076413的博客
03-27 2401
vue的基础使用、vue创建项目、创建vue项目、
前端Vue.js开发取反操作
weixin_43286092的博客
06-08 8548
判断赋值条件语句： 一次取反，判断成功得到对应的值 if(check=='checked'){//取反，对变量值 item.checked = item.checked== '1'?'1':'0'; } 取反方式： 两次判断成功，对取值进行交叉，实现字符串值’0’和‘1’的取反： 缘由： mongoDB数据库，定义的数据类型为String时候，实现0和1的取反操作。（可将第二次判断是否为true去除）。 if(check=='check
Vue+Vuex实现购物车的正选与反选和计算总价
weixin_45356397的博客
11-21 525
1.使用 Vuex 实现购物车的正选与反选 最近在写一个商城类型的项目，但是对于 Vuex 的使用，确实是很菜，最近也是在恶补，终于在经过几天的学习中学会了购物车的正选与反选，还有计算总价，在这里分享给大家，希望大家对于我的错误多多指点 2.使用 json-server 代理 2.1 安装 npm install -g json-server 2.2 使用 json-server -...
vue中如何获取或者改变vuex中的值
在无知中学习，在学习中成长，在成长中学习
09-09 5130
vue中如何获取或者改变vuex中的值store-->index.js在页面中使用或者修改vuex中的值 store–>index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin:localStorage.getItem("isLogin")?localStorage.getItem("isLogin"):fal
vue自定义权限标签
热门推荐
succeedcow的博客
10-05 1万+
vue vuex 自定义权限标签
vue2 v-if点击取反
09-23
在Vue 2.x中，可以通过将v-if的条件设置为取反的方式实现点击取反的效果。在你提供的代码中，判断条件为`scope.row.launchType == '0'`和`scope.row.launchType == '1'`，分别对应下架和上架按钮的显示。如果你想要在点击按钮时取反条件，可以使用`!`运算符来对条件进行取反，代码如下： ``` <el-button v-if="!scope.row.launchType == '0'" size="mini" type="text" icon="el-icon-edit" @click="sxjUpdate(scope.$index,scope.row)" v-hasPermi="['onlineEdu:eduOperateInformation:UpdatePutAway']">下架 </el-button> <el-button v-if="!scope.row.launchType == '1'" size="mini" type="text" icon="el-icon-edit" @click="sxjUpdate(scope.$index,scope.row)" v-hasPermi="['onlineEdu:eduOperateInformation:UpdatePutAway']">上架 </el-button> ``` 这样，当`scope.row.launchType`为'0'时，下架按钮就会显示；当`scope.row.launchType`为'1'时，上架按钮就会显示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值