<el-button> 使用:v-if=""

el-button 组件可以使用 v-if 指令来控制它的显示与隐藏。例如，当满足某个条件时，我们希望显示按钮，否则隐藏按钮，可以这样写：

<template>
  <div>
    <el-button v-if="showButton">点击我</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showButton: true
    }
  }
}
</script>

在上面的代码中，我们使用了一个 data 属性 showButton 来控制按钮的显示与隐藏，当 showButton 的值为 true 时，按钮会显示，否则隐藏。在实际应用中，我们可以根据业务需求来动态控制 showButton 的值，从而实现按钮的显示与隐藏。

相关问题

<!-- 问卷 --> <template> <div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto"> <el-row :gutter="gutter"> <el-button type="danger" v-if="this.dataitem.CHI_MED_FORM_NO" @click="deletefun" style="position: absolute; left: 20px; top: 10px" > 删除 </el-button> <h3> 中医体质辨识问卷 <el-button size="mini" v-if="this.dataitem.CHI_MED_FORM_NO" round @click="dayinView()" >打印预览</el-button > </h3> </el-row> </template> 一进来页面将页面全部灰置掉，当点击编辑按钮时页面恢复正常

根据你提供的代码，可以使用一个 `isEdit` 变量来控制页面的编辑状态。当 `isEdit` 为 `false` 时，将页面置灰，当点击编辑按钮时，将 `isEdit` 设置为 `true`，页面恢复正常。以下是修改后的代码：

<template>
  <div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto">
    <el-row :gutter="gutter">
      <el-button
        type="danger"
        v-if="dataitem.CHI_MED_FORM_NO && !isEdit"
        @click="deletefun"
        style="position: absolute; left: 20px; top: 10px"
      >
        删除
      </el-button>
      <h3>
        中医体质辨识问卷
        <el-button
          size="mini"
          v-if="dataitem.CHI_MED_FORM_NO && !isEdit"
          round
          @click="dayinView()"
          >打印预览</el-button
        >
      </h3>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
      // other data properties
    }
  },
  methods: {
    deletefun() {
      // delete function implementation
    },
    dayinView() {
      // print preview function implementation
    },
    // other methods
  }
}
</script>

然后在编辑按钮的点击事件中，将 `isEdit` 设置为 `true`：

<el-button type="primary" @click="isEdit = true">编辑</el-button>

这样，在没有点击编辑按钮时，页面将会处于置灰状态，点击编辑按钮后，页面将恢复正常。

<el-form-item> <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button> <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button> <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button> </el-form-item>具体解释这段代码

这段代码是一个基于 Element UI 组件库的表单组件，包含了三个 `<el-button>` 按钮，用于表单查询功能。

第一个 `<el-button>` 按钮中的 `v-if` 指令用于判断按钮是否需要显示，当 `contents.searchBtnIcon` 的值为 `1` 且 `contents.searchBtnIconPosition` 的值为 `1` 时，该按钮会被显示。该按钮的图标为 `el-icon-search`，类型为 `success`，表示这是一个成功操作的按钮。当按钮被点击时，会触发 `search()` 方法，该方法可能用于向服务器发送查询请求。

第二个 `<el-button>` 按钮的 `v-if` 指令的作用与第一个按钮相同，但它的图标和文本排列方式不同，它的图标是放在文本右侧的，使用了 `<i>` 标签来渲染。该按钮的其余属性与第一个相同。

第三个 `<el-button>` 按钮中的 `v-if` 指令用于判断按钮是否需要显示，当 `contents.searchBtnIcon` 的值为 `0` 时，该按钮会被显示。该按钮的类型为 `success`，表示这是一个成功操作的按钮。当按钮被点击时，会触发 `search()` 方法，该方法可能用于向服务器发送查询请求。

整个表单组件中的 `el-form-item` 标签用于包裹表单元素，而 `el-button` 标签则是用于创建一个按钮元素，并且绑定了点击事件 `@click`，在点击按钮时会触发 `search()` 方法。