vue中动态控制btn的disabled属性方式

 更新时间:2022年04月09日 08:58:37   作者:努力_才幸福  
这篇文章主要介绍了vue中动态控制btn的disabled属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

动态控制btn的disabled属性

场景

当ajax请求回来的数据为空时,btn为disabled的状态,否则,btn的disabled属性为false

代码:

<button class="iconDivIcon targetBtn" :class="isdisabled?btndisabled:''"  style="width:100px;" @click="changeEnables(0)" :disabled="isdisabledFn">禁用</button>  
<div id="app"><button :disabled="isdisabledFn">测试</button><div>    

js中:

var app=new Vue({undefined
        el:"#app",
        data:{undefined
                isDisabl:true
        },
        computed:{undefined
                isdisabledFn(){undefined
                    if(后台传过来的数据!=null){undefined
                            return this.isdisabled=false;
                    }else{undefined
                            return this.isdisabled=true;
                    }
                }
        }
})

动态改变:disabled的属性值

比如这个,我想要做这个功能:当我在input输入生日后,只能输入一次,输入完成后才修改为none,一开始默认为true:disabled="none"

找了很久,可能没人提这么弱智的问题哭唧唧,所以我自己琢磨了很久,终于啊。。

首先

先把那个none改为一个可以修改的值,这里我随便起的也叫disabled

<date-picker v-model="time1" valueType="format"
                     ref="userBirthdayInput"
                     id="userBirthday"
                     :disabled="disabled"
                     placeholder="请输入生日"></date-picker>

然后

设置一个属性props,里面设置这disabled的默认值为false,注意:这个props与data同级的,不是在data里面的。

export default {
    name: "ModifyUserInfo",
    props: {
      disabled: {
        default: false
      }
    },
    data() {
      return {
        time1: null,
        loading: false,
        userPhoto: "",
      }
    }
    }

接着

你想在哪把这个值改为true(改这个为不可编辑)就在哪把这只改为:this.disabled=true就可以啦

this.disabled = true

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue使用axios实现动态追加数据

    vue使用axios实现动态追加数据

    在vuejs中使用axios时,有时候需要追加数据,比如,移动端下拉触底加载,分页加载,滑动滚动条等,下面小编就来为大家介绍一下如何使用使用axios实现动态追加数据吧
    2023-10-10
  • Vue中v-html图片过大导致溢出的问题及解决

    Vue中v-html图片过大导致溢出的问题及解决

    这篇文章主要介绍了Vue中v-html图片过大导致溢出的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 详解vue结合el-table实现表格小计总计需求(summary-method)

    详解vue结合el-table实现表格小计总计需求(summary-method)

    这篇文章主要介绍了vue结合el-table实现表格小计总计需求(summary-method),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue使用axios发送请求并实现简单封装的示例详解

    Vue使用axios发送请求并实现简单封装的示例详解

    这篇文章主要介绍了Vue使用axios发送请求并实现简单封装,主要包括安装axios及简单使用配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • Vue引入部分element.ui组件的一些小坑记录

    Vue引入部分element.ui组件的一些小坑记录

    这篇文章主要介绍了Vue引入部分element.ui组件的一些小坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于vue的tab-list类目切换商品列表组件的示例代码

    基于vue的tab-list类目切换商品列表组件的示例代码

    这篇文章主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue组件实现旋转木马动画

    Vue组件实现旋转木马动画

    这篇文章主要为大家详细介绍了Vue组件实现旋转木马动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue中$bus的用法及$on、$off的使用说明

    Vue中$bus的用法及$on、$off的使用说明

    这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vuex 中插件的编写案例解析

    vuex 中插件的编写案例解析

    Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue引入sass并配置全局变量的方法

    Vue引入sass并配置全局变量的方法

    这篇文章主要介绍了Vue引入sass并配置全局变量的方法
    2018-06-06

最新评论