Vue动态控制input的disabled属性的方法
vue中动态控制btn的disabled属性
2018-05-17 10:16:44 努力_才幸福 阅读数 33109 收藏 更多
分类专栏: vue
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38098192/article/details/80346779
场景:当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({
el:"#app",
data:{
isDisabl:true
},
computed:{
isdisabledFn(){
if(后台传过来的数据!=null){
return this.isdisabled=false;
}else{
return this.isdisabled=true;
}
}
}
})
相关文章
- 第三节.vue.js属性与方法
- Vue——详解MVVM模型在vue中的使用
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
- webpack 与 vue 打包体积优化
- vue嵌套路由
- vue 组件 单选切换控制模板 v-bind-is
- Vue--名称案例,监听键盘事件@keyup--实时获取数据-----watch属性方法获取
- Vue知识点总结(18)——生命周期(超级详细)
- VUE-005-axios常用请求参数设置方法
- VUE图片懒加载-vue lazyload插件的简单使用
- 解决webstorm中vue语法没有提示
- vue学习笔记十:Vue中引入jquery
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue中router-link的详细用法
- 解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- npm 报错之 vue项目中stylus-loader版本兼容问题(stylus(css预处理框架))
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- vue-解决Vue打包上线之后部分CSS不生效的问题