最新消息:因从typecho切换到wordpress, 由于转换导入问题,文章可能存在部分乱码或者排版问题,逐个排查修复中...

[Vue] 学习笔记: 关于 v-cloak , v-text 解决闪烁问题及过滤器问题

懒得分类 admin 1138浏览 0评论

原始代码:

<div id="app"><p>{{ msg }} <p></div>

这种在浏览器加载时,如果网速过慢,在JS脚本还没加载成功时,可能在用户端浏览器界面会看到 {{ msg }} 的字符,然后等到脚本加载完成后,才会看到渲染后的数据。这可以算是闪烁问题。

解决办法一是可以将v-cloak属性加到里面,然后再设置 属性的css ( 顺便学下英文吧: cloak 遮蔽物,屏蔽的意思)

<div id="app"><p v-cloak>{{ msg }} <p></div>
<style>
[v-cloak]{display:none}
</style>

这个在浏览器端实时查看网页加载过程中的HTML代码的话可以看到v-cloak属性开始是出现的(于是对应的值给屏蔽了),但加载完成后该属性消失了,于是对应的数据也就显示出来了。这相当于利用了v-cloak属性和CSS结合来实现解决数据显示闪烁的问题。

解决办法二是,直接使用v-text属性即可,无需额外使用css,如下:

<div id="app"><p v-text>{{ msg }} <p></div>

好了,新的问题来了,如果在使用v-text的时候额外加过滤器呢?
在不使用的时候,我们可以加上过滤器,形如:
<div id="app"><p>{{ msg | capitalize }} <p></div>
这里capitalize是我另外加的过滤器,将英文首字母转成大写的。因为Vue所说之前也默认提供过类似过滤器,后来说是删除了,后来看文章也有说已经加回来了的,实在不清楚。这里就顺便附上吧。

filters: {
    capitalize: function(val) {
        return val.charAt(0).toUpperCase() + val.slice(1).toLowerCase();
        }
    }

那么使用v-text方式时,我们如何再加上这个过滤器呢?
直接加 | 线过滤器方式并不好使哦。

 <p v-text="msg | capitalize"></p>

正确的姿势如下:

 <p v-text="$options.filters.capitalize(msg)"></p>

转载请注明:Linc Hu » [Vue] 学习笔记: 关于 v-cloak , v-text 解决闪烁问题及过滤器问题

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址