vue模板中变量非真时的默认值

问题描述:

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

渲染出来为

<div>
    <section>foo</section>
    <section></section>
    <section></section>
</div>

期望的效果:
希望在变量非真时有全局默认值,比如”–“

我的尝试

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

这样虽然可以达到效果 但是太累。每个都要写一笔。为了偷懒 我改造了一下

<template>
    <div>
        <section>{{showX("a")}}</section>
        <section>{{showX("b")}}</section>
        <section>{{showX("c")}}</section>
    </div>
</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

回答:

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

回答:

可以运用三目运算符吧,

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

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

回答:

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

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注