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

目录
  • 动态控制btn的disabled属性
    • 场景
  • 动态改变: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的属性值

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

首先

先把那个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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页

  • Vue如何设置button的disable属性

    目录 Vue设置button的disable属性 1.这个属性在HTML里只有1个值 2.如果需要在vue项目中控制按钮的可用与否 Vue使用js控制button的disabled属性 Vue设置button的disable属性 表单元素有一个disable属性,用来控制该元素是否可用. 1.这个属性在HTML里只有1个值 用法就是 <button disable="disable">点击</button> 经实测,disable接受任何属性值,甚至只要你给标签

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

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

    目录 动态控制btn的disabled属性 场景 动态改变:disabled的属性值 首先 然后 接着 动态控制btn的disabled属性 场景 当ajax请求回来的数据为空时,btn为disabled的状态,否则,btn的disabled属性为false 代码: <button class="iconDivIcon targetBtn" :class="isdisabled?btndisabled:''"  style="width:100px;

  • Vue中的 ref,props,mixin属性

    Vue中的 ref,props,mixin属性

    目录 ref props $attrs mixin ref ref 属性: 1.被用来给元素或子组件注册引用信息((id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取: this.$refs.xxx 为了说明这个属性,我们重新写下相关

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了 我创建了两个组件,可以相互切换 组件1: 组件2: 第一种方式 在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存 此时路由设置完毕,keep-aliv

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

    一,动态参数 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr

随机推荐