suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript – Standardwert, wenn die Variable in der Vue-Vorlage nicht wahr ist

Problembeschreibung:

<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>

gerendert als

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

Gewünschter Effekt:
Ich hoffe, dass es einen globalenStandardwert gibt, wenn die Variable nicht wahr ist, wie zum Beispiel „--“

Mein Versuch

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

Obwohl dies den Effekt erzielen kann, ist es zu ermüdend. Jeder muss aufgeschrieben werden. Nur um faul zu sein, habe ich es geändert

<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>

Die Hilfe, die ich möchte:
Allerdings fühlt sich die oben beschriebene Schreibmethode immer noch nicht bequem genug an. Gibt es eine Möglichkeit, dass ich <section>{{x.a}}</section> trotzdem schreiben kann, wenn sein Wert nicht wahr ist? Er wird in der Vorlage als „--“ gerendert, vorausgesetzt, die Originaldaten sind x nicht verschmutzt

淡淡烟草味淡淡烟草味2819 Tage vor864

Antworte allen(3)Ich werde antworten

  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:54:40

    可以用 filter 来实现这个效果:

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

    如果还觉得太麻烦,可以用比较黑科技的手段:

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

    解释一下,_s 是 Vue 的内部属性,模版中的每一个文本节点都会被这个方法处理,将返回值进行渲染,由于是内部属性,所以在版本更新时不能保证稳定性,这点要注意。附上 Demo:
    https://codepen.io/cool_zjy/p...

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:54:40

    可以运用三目运算符吧,

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

    这个就是相当于一个if判断语句,

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:54:40

    提供个人思路吧,在于你在什么地方去修改data中的x值:

    1. 在created时修改,那么直接在修改的地方使用你第一种使用过的短路运算就足够了

    2. 如果是初始化视图后再修改,那么就设置你的初始为 '--', 不就可以吗?

    Antwort
    0
  • StornierenAntwort