問(wèn)題描述

問(wèn)題描述：

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

渲染出來(lái)為

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

期望的效果：希望在變量非真時(shí)有全局默認(rèn)值，比如'--'

我的嘗試

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

這樣雖然可以達(dá)到效果 但是太累。每個(gè)都要寫(xiě)一筆。為了偷懶 我改造了一下

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

想得到的幫助：但是，上述寫(xiě)法還是覺(jué)得不夠方便。有沒(méi)有什么辦法 使我可以在模板里還是寫(xiě)<section>{{x.a}}</section> 當(dāng)其值非真時(shí)渲染成'--' ,前提是不要污染原始數(shù)據(jù)x

問(wèn)題解答

可以用 filter 來(lái)實(shí)現(xiàn)這個(gè)效果：

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

{{ message | e }}

如果還覺(jué)得太麻煩，可以用比較黑科技的手段：

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

解釋一下，_s 是 Vue 的內(nèi)部屬性，模版中的每一個(gè)文本節(jié)點(diǎn)都會(huì)被這個(gè)方法處理，將返回值進(jìn)行渲染，由于是內(nèi)部屬性，所以在版本更新時(shí)不能保證穩(wěn)定性，這點(diǎn)要注意。附上 Demo：https://codepen.io/cool_zjy/p...

可以運(yùn)用三目運(yùn)算符吧，

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

這個(gè)就是相當(dāng)于一個(gè)if判斷語(yǔ)句，

提供個(gè)人思路吧，在于你在什么地方去修改data中的x值：

在created時(shí)修改，那么直接在修改的地方使用你第一種使用過(guò)的短路運(yùn)算就足夠了

如果是初始化視圖后再修改，那么就設(shè)置你的初始為 ’--’, 不就可以嗎？