vue如何通过button的disabled控制按钮能否被使用

目录
  • 通过button的disabled控制按钮能否被使用
  • vue-button设置按钮是否可点击状态

通过button的disabled控制按钮能否被使用

 :disabled="scope.row.canEdit === 0"
<el-button @click="handleEdit(scope.row)" type="text" size="small" 
:disabled="scope.row.canEdit === 0">编辑</el-button>

vue-button设置按钮是否可点击状态

<template>
  <v-app>
    <v-main>
      <v-btn
          class="error"
          text
          @click="addSave"
          :disabled="langAbbrs">保存
      </v-btn>
    </v-main>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  computed: {
    langAbbrs() {
      return false;  //true  false
    },
  },
  methods:{
    addSave(){
      console.log('click点击了保存按钮')
    }
  }
};
</script>

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

赞 (0)

相关推荐

  • vue 按钮 权限控制介绍

    目录 一.步骤 1.定义buttom权限 2.定义store 3.创建permission指令 4.使用permission指令 5.删除无权限数据 6.传入状态管理数据 二.概况 前言: 在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过vuex来实现这个功能. 一.步骤 1.定义buttom权限 在state中创建buttomPermission,用于保存后台接口返回的权限

  • 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前端按钮权限控制

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = f

  • vue如何通过button的disabled控制按钮能否被使用

    目录 通过button的disabled控制按钮能否被使用 vue-button设置按钮是否可点击状态 通过button的disabled控制按钮能否被使用  :disabled="scope.row.canEdit === 0" <el-button @click="handleEdit(scope.row)" type="text" size="small"  :disabled="scope.row.ca

  • 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 $attrs & inheritAttr实现button禁用效果案例

    Vue $attrs & inheritAttr实现button禁用效果案例

    components/Button.vue <template> <div> <button :disabled="$attrs.disabled">点击</button> </div> </template> <script> export default { inheritAttrs: false, } </script> <style scoped> </style&

  • vue3 自定义指令控制按钮权限的操作代码

    vue3 自定义指令控制按钮权限的操作代码

    经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能.为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒.以下是个人的做法,是否有弊端和不足,或者各位高手有更优的方案,欢迎指导和赐教! 1.总体效果如下: 2.permissionlist组件中的按钮设置为:增加.修改和删除

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • Vue.js学习笔记之常用模板语法详解

    Vue.js学习笔记之常用模板语法详解

    本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo

  • JavaScript的MVVM库Vue.js入门学习笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vue.js中数据绑定的语法教程

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

随机推荐