如何避免在Vue.js接管之前在页面上显示{{expr}} flash?

时间:2016-11-15 10:56:49

标签: vue.js

例如,我在一个页面中有大量的跨度(超过300个),每个跨度都有TsetProvider testProvider = new TestProvider(); TestService testService = testProvider.getTestService(); TokenModel tokenModel = new TokenModel(); tokenModel.cellPhone = "121212129999"; Call<TokenModel> call = testService.newOtp(tokenModel); call.enqueue(new Callback<TokenModel>() { @Override public void onResponse(Call<TokenModel> call, Response<TokenModel> response) { } @Override public void onFailure(Call<TokenModel> call, Throwable t) { } }); 绑定以显示其内容:

{{expr}}

在页面加载后,文字<span>{{expr}}</span> 将在VueJS接管之前闪烁显示在页面上并显示真实的绑定值。这对客户来说很糟糕,有没有办法避免呢?

1 个答案:

答案 0 :(得分:20)

v-cloak是您要查找的HTML属性。

  

该指令将保留在元素上,直到关联的Vue实例完成编译。结合[v-cloak] { display: none }等CSS规则,该指令可用于隐藏未编译的胡须绑定,直到Vue实例准备就绪。