vue-点击按钮取反

最新推荐文章于 2023-12-14 17:29:37 发布
VIP文章 最新推荐文章于 2023-12-14 17:29:37 发布
阅读量8.1k 收藏
点赞数 2
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45737446/article/details/110071708
版权

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

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

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

代码：

		  <el-button
            v-if=
最低0.47元/天 解锁文章
学习·笔记
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue基础-vue指令
Autumnxwq的博客
10-16 1012
Vue 基础指令
vue-fab-Vue浮动操作按钮。-Vue.js开发
05-27
Vue的FAB浮动操作按钮。 该组件支持多个操作按钮，因此您可以根据需要添加任意多个操作。 它将触发事件t FAB Vue浮动动作按钮。...实时演示安装npm install vue-fab-保存依赖项在文档的头部包含以下样式表 和
vue中英文切换实例代码
10-15
在本篇文章里小编给大家整理了关于vue中英文切换实例代码，需要的朋友们学习参考下。
翻转世界案例
最新发布
m0_73951790的博客
12-14 387
逆转世界
vue3实现鼠标点击卡片翻转效果
hsyq586的博客
11-17 798
当点击该按钮时，会调用flipAllCards方法，遍历cards数组，并将每个卡片的flipped属性取反，从而实现全部卡片同时翻转，并且在flipAllCards 方法中添加逻辑来检查卡片的当前状态，如果已经是反面，则不进行翻转。每个卡片都有front和back两个面，初始状态下都是正面（flipped: false）。通过点击卡片，我们可以改变对应卡片的flipped属性，从而实现翻转动画。使用v-bind:class指令来动态切换卡片的类名，根据flipped属性的值来决定显示正面还是反面的内容。
VUE2.0基本语法
qq_42646178的博客
08-16 978
1.基本语法 1.1v-if、v-show、v-else v-if: 满足条件则进入 v-show: 控制元素是否显示、css的display v-else: v-if取反 <div id="div1"> <di v-if="ok"> v-if是true <p v-show="no"> v-show是true </p>
vue button之反转信息的使用
qq_53986004的博客
10-12 760
学会如何使用button进行信息的反转
@vue/cli脚手架
qq_52963857的博客
06-13 776
@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修饰符
Vue--常用指令总结
ShuaideryiP的博客
09-24 335
1. Vue语法--插值表达式 1.1 目标 学习插值表达式, 在DOM中插入内容 1.2 学习 又叫: 声明式渲染/文本插值/大胡子语法 语法: {{ 表达式 }} 例子： <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}&l
点击事件（Button等）变量取反技巧
科技向善
12-25 6206
<script> let app = new Vue({ el: '#app', data: { message: 'Hello World', boolActive: true }, methods: { buttonClick: function() { this.isActive...
前端Vue.js开发取反操作
weixin_43286092的博客
06-08 8380
判断赋值条件语句： 一次取反，判断成功得到对应的值 if(check=='checked'){//取反，对变量值 item.checked = item.checked== '1'?'1':'0'; } 取反方式： 两次判断成功，对取值进行交叉，实现字符串值’0’和‘1’的取反： 缘由： mongoDB数据库，定义的数据类型为String时候，实现0和1的取反操作。（可将第二次判断是否为true去除）。 if(check=='check
vue-okr-tree:http
03-19
更新时间2020/12/02修复初步修改数据不渲染问题对应版本：vue[email protected] 更新时间2020/12/05修改部分展示bug对应版本：vue[email protected] 更新时间2021/01/13增加updateKeyChildren方法：vue[email protected] ...
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append...
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
01-21
产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...
vue全选反选操作（computed计算属性，watch监听，@click事件）
lzfengquan的博客
02-17 1751
全选反选的代码操作 一：computed 计算属性必须关联至少一个响应式data数据，响应式数据改变，计算属性就改变。 推荐使用。 实例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l
vue 基础 v-model 基本使用
qq_45494569的博客
03-14 341
vue 基础 v-model 一、v-model的使用 <div id="app"> <input type="text" v-model="message"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:
前端vue入门(纯代码)15
m0_62003092的博客
06-25 575
1、准备样式① 过度样式② 动画样式定义动画使用动画v-enter-active：进入过程中的动画v-leave-active：离开过程中的动画2、使用包裹要过度的元素知识补充： 关键帧 @keyframes 动画名 { … } 让包裹的元素一开始就有出场动画【有以下两种方式，but如果写成了,没有冒号，那等式右边的就成一个字符串,所以必须要有冒号】 完整代码 样式css分析 进入、离开的起点进入、离开的过程进入、离开的终点 2、引入animate.css库 3、基础用法 必须配置
vue中如何获取或者改变vuex中的值
在无知中学习，在学习中成长，在成长中学习
09-09 5028
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
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、付费专栏及课程。

余额充值