如何用vue3给button动态添加属性

<el-button @click="dialogVisible = false" class="btn" :disabled="disabled">
    咨询
</el-button>

目前遇到的问题是，这个按钮本身颜色时白色的，当条件满足后，要变成另一种样式type=“primary”，请问如何实现？
也就是要变成这种

<el-button @click="dialogVisible = false" class="btn" :disabled="disabled" type="primary">
    咨询
</el-button>

:type="bool ? 'primary' : '' "

道理应该是一样的

<template>
  <div>
    <el-button :type="type" @click="btnClick">主要按钮</el-button>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      type: '',
    };
  },
  methods: {
   btnClick() {
     this.type = 'primary';
   }
  },
  created() {
    this.add(4, 6);
  },
};
</script>

<style lang="scss" scoped>
</style>

<el-button @click="dialogVisible = false" class="btn" :disabled="disabled"  :type="条件判断?'primary':''">
    咨询
</el-button>