如果预期值为 null，如何显示默认值？

Question

如果期望值为null，是否可以显示默认值？

例如

<v-card-subtitle class="py-0 my-0">{{ user.name??'n/a' }}</v-card-subtitle>

Answer 1

也许用计算属性:

new Vue({
  el: "#demo",
  data() {
    return { text: null }
  },
  computed: {
    textVal() {
      return this.text || 'n/a'
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p> {{ textVal }} </p>
</div>

Answer 2

如果您真的想要它出现在模板中，您可以使用

<v-card-subtitle class="py-0 my-0">{{ user.name || 'n/a' }}</v-card-subtitle>

但我强烈建议在 script 部分中使用它，这将为您提供更大的灵活性并保持 template 简单明了。

Answer 3

如果您有几件物品可能需要 'n/a'，您可以试试这个

<v-card-subtitle class="py-0 my-0">{{ user.name | handleEmptyValue }}</v-card-subtitle>

<script>
import _ from "lodash";

export default {
  filters: {
    handleEmptyValue(value) {
      return _.isEmpty(value) ? "N/A" : value;
    }
  }
};
</script>

如果预期值为 null，如何显示默认值？

How can I display a default value if the expected value is null?

vue.js

vue-component

vuejs2

vuetify.js