如何简化v-bind中的条件表达式？避免重复${link}/${id}代码

可以通过以下几种方式简化重复代码：

• 直接拼接条件参数
  把公共路径部分提取出来，仅根据条件追加查询参数：

  :href="`${link}/${id}${type === 'exampleType' ? '?exampleGetParam=true' : ''}`"
  

  这种方式最直接，公共路径只写一次，通过三元表达式判断是否添加参数。

• 利用逻辑与运算符简化
  逻辑与（&&）在条件为真时会返回后面的表达式，为假时返回空字符串，同样能达到效果：

  :href="`${link}/${id}`${type === 'exampleType' && '?exampleGetParam=true'}"
  

• 抽离为计算属性（推荐复杂场景）
  如果后续可能增加更多条件判断，把逻辑抽成计算属性会让模板更简洁，维护性更高：

  <template>
    <a :href="targetHref">链接</a>
  </template>
  
  <script>
  export default {
    data() {
      return {
        link: '/path',
        id: 123,
        type: 'exampleType'
      }
    },
    computed: {
      targetHref() {
        const baseUrl = `${this.link}/${this.id}`;
        return this.type === 'exampleType' ? `${baseUrl}?exampleGetParam=true` : baseUrl;
      }
    }
  }
  </script>
  

内容的提问来源于stack exchange，提问作者d1zz7