vue点击按钮之后置成不可用_vue 设置button disabled

最新推荐文章于 2023-12-19 09:24:34 发布
最新推荐文章于 2023-12-19 09:24:34 发布
阅读量1.4k 收藏
点赞数
文章标签： vue点击按钮之后置成不可用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39820997/article/details/111550153
版权

button

dis:''  ||   dis:'111'  || dis:'aaaa'  都会设置按钮disabled="disabled"

dis:false  才会取消这种状态，很神奇

这是官网上的一段解释，现在才真正的明白到底是啥意思，只有设置值为false的时候才会取消上面的状态，很严格的哈

同理可以看到：

12222222222

现在p的显示是根据show的布尔值来判定的   show:''   show:false  布尔值都是假  只有当show:true || show:'2222' || show:'aaaaaa'

布尔值为真的时候才会显示，就是这么奇葩，但是上面的button的disabled属性并不是这样的，p的显示按照正常的逻辑是可以理解的，disabled确实进行严格定义的

只有设置disabled为false的时候才会进行显示的，amazing

现在看官网的解释，就很明白了，值得真假，而上面是严格定义，值为false才会取消，哈哈。。。。。感觉学到了很多东西

style || class

这里的active也是只要判断isActive是否是真值就好，而不是像最开始的，需要判断button中的disabled必须是false才会是禁用，

这里发现：除了设置默认的属性需要使用严格的false，其余的都是需要看属性值的真假

weixin_39820997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件居中：文字居中，按钮居中，图片居中等，如何实现在容器中居中
Drawing stars的博客
03-26 8万+
Vue实现组件在容器中居中显示的办法 本文用实验的方法理解各种方法实现居中的效果。 实现水平居中的样式主要有：text-align: center， margin: auto。 当然还有别的方式也可以实现，也会写在下面。 用三个同样的div来控制变量法看效果，这三个div既是组件也是容器。下面将他们分别叫做1号，2号，和3号。 <template> <div> <div style="border:solid #409eff ;width: 400px;
vue 判断元素内容是否超过宽度的方式
10-15
主要介绍了vue 判断元素内容是否超过宽度的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue $attrs & inheritAttr实现button禁用效果案例
01-22
components/Button.vue <template> <div> <button :disabled=$attrs.disabled>点击</button> </div> </template> [removed] export default { inheritAttrs: false, } [removed] <style scoped> </style> App.vue <template> <div id=app> <Parent></Parent> <Button disabled></Button> </div> </template
解决vue 按钮多次点击重复提交数据问题
12-02
这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。 事件分为两种情况： •第一种： 不操作数据型 •第二种： 操作数据型 <button @click="submit()" :disabled="isDisable">点击</button> [removed] export default { name: 'TestButton', data: function () { return { isDisable: false } }, methods: { submit()
vue-storybook：自定义Vue单个文件组件的块
02-06
故事书 Vue单个文件组件的自定义<story>块，这些块可通过Vue CLI 3和开箱即用。 yarn add vue-storybook const { storyLoader , registerStories } = require ( "vue-storybook" ) ; 这是什么？ Webpack加载器+帮助程序脚本，可让您使用自定义的<story>块修饰已存在的Vue单个文件组件（SFC），该块会自动翻译成风格的故事。 你好世界的例子 回购： : < story xss=removed> < my-button : disabled
前端vue 判断图片格式
05-25
JS上传文件判断文件格式 GIF JPG PNG
【Vue】居中居左居右样式总结
热门推荐
慕白Lee的博客
06-13 2万+
另外，还可以使用 Flex 布局来实现。例如，将按钮所在的容器元素设置为 Flex 容器，并使用 `justify-content: center` 属性来实现水平居中显示。示例如下：```vue。上面的代码中，我们将按钮所在的容器元素设置为 Flex 容器，并使用 `justify-content: center` 属性来实现水平居中显示。上面的代码中，我们在按钮所在的容器元素上添加了 `text-align: center` 样式，来实现按钮居中显示。
若依前端vue使用之按钮居中
一起加油吧~
06-12 2840
其实我也不知道算不算vue的，反正就是自己遇到过的，都简单记录一下。欢迎大家指正~
实现一个基于Vue的Button小组件
web前端技术交流群：457188470
12-23 2926
概述 原生HTML的button只能保证功能存在，样式都不怎么好看。当然也可以通过编写css样式来改变原生HTML中的button显示，但是现在各个UI框架都很流行，也很方便，很多时候都是直接引入框架就能获得非常好看、好用的样式组件。那么此篇文章使用Vue也来实现一个好看、使用的Button小组件。 实现 button.vue 首先需要在模板页面将基本button组件需要的元素进行组装 <t...
前端Vue日常工作中--元素居中
前端工作学习中
12-19 4171
在Vue中实现元素居中的方法非常多样，以下将介绍一些主要和常用的方法，包括CSS布局技巧和Element UI组件的结合使用。
Ant design vue 的组件禁用属性 disabled.pdf
12-16
Ant design vue 的组件禁用属性 disabled
Vue实现table上下移动功能示例
01-19
本文实例讲述了Vue实现table上下移动功能。分享给大家供大家参考，具体如下： 结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容...el-button icon=el-icon-arrow-up :disabled=scope.$index ===
Vue简单练习封装button按钮 直接上代码和效果图
weixin_42201272的博客
03-24 761
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
vue自学入门-9 @click后直接跟alert报错
zhaogaojian的专栏
04-14 80
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ...
Vue2按钮组件（Button）
Mr Dear的博客
12-07 6982
Vue2封装的按钮组件
按钮或者文字页面居中
weixin_45346457的博客
12-09 120
left: 50%; // the CSS left property is based on the size of the parent element transform: translateX(-50%); // the transform property is based on the size of the target element, translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是<transform-function> ...
VUE SSR
昨日青空alhuo
07-07 177
vue ssr SSR? 将组件或页面渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 为什么使用服务器端渲染 (SSR)？ 优势 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 更快的内容到达时间，解决首屏渲染慢点问题 考量的点 开发条件所限，某些生命周期钩子函数只能在浏览器中触发，一些扩展库需要特殊处理 构建部署要求多，服务端渲染必须在node server环境下 服务器端负载变大 预渲染 只是用来改善少数
VUE点击按钮置灰判断
CSDNtiexin的博客
07-28 1万+
VUE点击按钮置灰判断上代码 根据页面值判断按钮是否可用，不可用置灰（不可点击true） 在el-button或button标签里加上:disabled=“submissionFlag” 然后在return返回值里加上submissionFlag: true 默认为灰 接下来在mounted方法里判断，首先要获取页面值 然后判断是否置灰 上代码 第一步 <el-button :disabled=“submissionFlag” @click=“billingSubmission”>提交 第
注册与表格显示.rar
最新发布
06-13
注册与表格显示.rar
vue中设置按钮不可点击
05-25
你可以在Vue中设置按钮不可点击，可以使用以下方法： 1. 在模板中使用v-bind指令绑定disabled属性，例如： ```html <button v-bind:disabled="isDisabled">按钮</button> ``` 其中，isDisabled是一个Boolean类型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值