防止 Vue.js 在慢速客户端上显示括号

Question

我刚刚制作了我的第一个 Vue.js 应用程序，它很棒。我遇到的唯一问题与慢速连接上的绑定值有关。

例如，在我的template中我有这样的代码：

<div v-for="event in events">
    <div class="start_time">
        {{ event.start_time_formatted }}
    </div>
    <div class="icon_placeholder">
        <img v-bind:src="event.icon" alt="Sport Image" />
    </div>
    <div class="event_title">
        <a v-bind:href="event.url">
            {{ event.title }}
        </a>
    </div>
    <div class="button_placeholder">
        <a v-bind:href="event.url" class="btn btn-filled">
            Watch
        </a>
    </div>
</div>

但问题是，在加载我网站的所有资产之前，我会得到这个结果：

例如AngularJS的例子，可以通过指令绑定值，不显示括号。

如何在 Vue.js 中实现这种效果？

Answer 1

v-text should allow you to render more angular-ish, and and v-cloak 可以帮助您在需要 mustache 标签的情况下隐藏模板内容直到编译完成。

防止 Vue.js 在慢速客户端上显示括号

Prevent Vue.js to display brackets on slow clients

javascript

vue.js