526互联

vue模板语法中能否用??的三目运算简写的问题

发布时间 2023-03-30 16:22:02作者: 莫颀

使用双问号（??）的三目运算可以在 JavaScript 中使用，但在 Vue 模板语法中不支持。Vue 模板语法中的三目运算仍然使用单个问号（?）和冒号（:）的标准形式。例如：

{{ condition ? true_value : false_value }}

如果你想在 Vue 模板中使用类似于双问号（??）的语法，可以使用计算属性或方法来实现。例如：

<template>
  <div>
    {{computedValue}}
    <!-- output: It is raining -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: null
    }
  },
  computed: {
    computedValue () {
      return this.value ?? 'It is raining'
    }
  }
}
</script>

在这个例子中，计算属性 computedValue 检查 value 是否为 null 或 undefined，如果是，则返回 'It is raining'。否则返回 value 的实际值。通过使用计算属性，我们可以实现类似于双问号（??）的语法。