javascript - La valeur par défaut lorsque la variable dans le modèle Vue n'est pas vraie

Question

Description du problème :

<template>
    <p>
        <section>{{x.a}}</section>
        <section>{{x.b}}</section>
        <section>{{x.c}}</section>
    </p>
</template>
<script>
    export default {
        name:"xx",
        data(){
            return {
                x:{
                    a:"foo",
                    b:null,
                    c:null
                }
            }
        }
    }
</script>

Rendu comme

<p>
    <section>foo</section>
    <section></section>
    <section></section>
</p>

Effet souhaité :
J'espère qu'il y aura une valeur globalepar défaut lorsque la variable n'est pas vraie, telle que "--"

Mon essai

<template>
    <p>
        <section>{{x.a||"--"}}</section>
        <section>{{x.b||"--"}}</section>
        <section>{{x.c||"--"}}</section>
    </p>
</template>

Bien que cela puisse produire l'effet, c'est trop fatigant. Chacun doit être écrit. Juste pour être paresseux, je l'ai modifié

<template>
    <p>
        <section>{{showX("a")}}</section>
        <section>{{showX("b")}}</section>
        <section>{{showX("c")}}</section>
    </p>
</template>
<script>
    export default {
        name:"xx",
        data(){
            return {
                x:{
                    a:"foo",
                    b:null,
                    c:null
                }
            }
        },
        methods:{
            showX:function(key){
                const value = this.x[key];
                return !!value?value:"--";
            }
        }
    }
</script>

L'aide que je souhaite :
Cependant, la méthode d'écriture ci-dessus ne semble toujours pas assez pratique. Existe-t-il un moyen d'écrire <section>{{x.a}}</section> lorsque sa valeur n'est pas vraie, elle sera rendue sous la forme "--" dans le modèle, à condition que les données d'origine x soient pas pollué

Answer 1

Vous pouvez utiliser un filtre pour obtenir cet effet :

new Vue({
  data: {
    message: ''
  },
  
  filters: {
    e (str) { return str || '--' }
  }
})

{{ message | e }}

Si vous pensez toujours que c'est trop gênant, vous pouvez utiliser des méthodes plus black-tech :

var _s = Vue.prototype._s

Vue.prototype._s = function (s) {
  return _s.call(this, s || '--')
}

Expliquez, _s est une propriété interne de Vue. Chaque nœud de texte du modèle sera traité par cette méthode et la valeur de retour sera rendue puisqu'il s'agit d'une propriété interne, la stabilité ne peut pas être garantie lorsque la version est mise à jour. doit être noté. Démo ci-jointe :
https://codepen.io/cool_zjy/p...

Answer 2

Vous pouvez utiliser l'opérateur ternaire,

{{x.a?x.a:'--'}}

Cela équivaut à une déclaration de jugement if,

Answer 3

Veuillez me faire part de vos réflexions personnelles sur l'endroit où modifier la valeur x dans les données :

1. Il est modifié lors de la création, il suffit alors d'utiliser directement la première opération de court-circuit que vous avez utilisée à l'endroit modifié

2. Si vous initialisez la vue puis la modifiez, définissez simplement votre valeur initiale sur « - », n'est-ce pas ?