您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> (vue.js)如何控制vue不渲染data中的初始值?

(vue.js)如何控制vue不渲染data中的初始值?

来源:网络整理     时间:2017/12/2 0:53:07     关键词:

关于网友提出的“ (vue.js)如何控制vue不渲染data中的初始值?”问题疑问,本网通过在网上对“ (vue.js)如何控制vue不渲染data中的初始值?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (vue.js)如何控制vue不渲染data中的初始值?
描述:

按照国际惯例,我首先 new 了一个 Vue 实例

let vm = new Vue({
    
    data: {
        name: 'xxx'
    },
    
    methods: {
        getData(){
            let that = this;
            $.ajax({
                ...,
                success: function(res){
                    that.name = res;
                }
            });
        }
    },
    
    mounted(){
        this.getData();
    }
});

如上,在 data 中定义了一个变量 name, 将获取数据的函数挂载在 mounted 中,用异步返回的值去变更 name。 ok,现在将 name渲染在页面上:

<span>{{ name }}</span>

现在的问题是,页面上会快速显示 name 的初始值 'xxx',随后才更新为异步获得的数据,很影响体验
有没有方法可以不渲染初始值?(只展示异步获得的数据)

补充:设置初始值为空依然会渲染在页面上,撑开父元素
比如,渲染结构如下:

<span>({{ name }})</span>

解决方案1:

方法1、name: null
方法2、name: ""
方法3、created(){ this.name=""; }

解决方案2:

1.你不需要显示初始值,你写他干啥?你直接写空字符串不就行了!
2.你可以使用v-show v-if 去控制。
3.你的意思是要一个默认值吗?你可以默认值是‘’,然后 {{name.length > 0 ? name : 'default'}}

解决方案3:

name:null
或者
name:""

解决方案4:

你可以把初始值复制为空字符串'',然后用v-if或者v-show根据name是否为空来判断是否需要渲染<span>{{ name }}</span>就可以了。要是觉得突然出现的有点突兀,可以加过渡


以上介绍了“ (vue.js)如何控制vue不渲染data中的初始值?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4513397.html

相关图片

相关文章