javascript - vue模板中變數非真時的預設值

Question

問題描述：

#

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

渲染出來為

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

期望的效果：
希望變數非真時有全域預設值，例如"--"

我的嘗試

#

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

這樣雖然可以達到效果 但是太累。每個都要寫一筆。為了偷懶 我改造了一下

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

想得到的幫助：
但是，上述寫法還是覺得不夠方便。有沒有辦法 使我可以在模板裡還是寫<section>{{x.a}}</section> 當其值非真時渲染成"--" ,前提是不要污染原始資料x

Answer 1

可以用 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...

Answer 2

可以運用三目運算符吧，

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

這個就是相當於一個if判斷語句，

Answer 3

提供個人思路吧，在於你在什麼地方去修改data中的x值：

1. 在created時修改，那麼直接在修改的地方使用你第一種使用過的短路運算就足夠了

2. 如果是初始化視圖後再修改，那麼就設定你的初始為 '--', 不就可以嗎？