＜el-button＞根据条件改变显示值

最新推荐文章于 2025-04-02 17:23:52 发布

刊史生石

最新推荐文章于 2025-04-02 17:23:52 发布

阅读量6.1k

点赞数 5

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/nexttoparadise/article/details/121911766

版权

这篇博客分享了在Vue.js中如何根据条件动态改变按钮的显示内容和隐藏显示。通过实例展示了两种情况：一是同一按钮根据输入值变化显示'查询'或'输入'；二是根据条件切换不同按钮的显示。主要涉及条件渲染和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目的时候，会遇到很多问题，有的问题很小，只是以前没有接触，所以还是需要花时间寻找解决方法。最近，工作中有一个要求，一个按钮根据不同的要求，显示不同的值，要实现这个功能还是比较容易的。在这里将我自己的实现步骤记下来，以后再遇到，解决就方便了。具体情况还是要依据自己的项目来操作，有什么不足的地方，欢迎大家指出来。

<template>
  <div>
    <el-form ref="form" :model="form" label-width="150px">
      <!--  第一种情况 是同一个按钮根据不同的条件显示不同的按钮值   -->
      <el-row>
        <el-col :span="12">
          <!-- el-input 有值的话 el-button显示查询； el-input 没有值的话 el-button显示输入   -->
          <el-form-item label="按钮名改变">
            <el-input v-model="form.inputValue" :span="12"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--   判断条件 showBtnContain  -->
          <el-button type="primary" >
            {{ showBtnContain == true ? '查询' : '输入' }}
          </el-button>
        </el-col>
      </el-row>

      <!--  第二种情况 是不同的按钮根据不同的条件显示  本文示例是两个按钮  -->
      <el-form-item>
        <!--  这种方法 按钮要放在相同的域里面 本文是放在el-form-item里   -->
        <!--   判断条件 isEdit  -->
        <el-button v-if="isEdit" type="primary">显示按钮</el-button>
        <el-button v-else type="primary">隐藏按钮</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'btnChange',
  data() {
    return {
      //保存信息
      form: {},
      //显示按钮信息
      showBtnContain: false,
      isEdit: false

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.form.inputValue = '按钮显示查询'
      if (this.inputValue !== undefined && this.inputValue !== null && this.inputValue !== '') {
        this.showBtnContain = true
      }
    }
  }
}
</script>