vue中v |
您所在的位置:网站首页 › clock啥意思啊 › vue中v |
一、在vue中,渲染普通文本有2种方式:{{}}与v-text,如下: Document {{msg}} new Vue({ el: '#app', data: { msg: '欢迎Vue!' } })或将上面的 {{msg}}改成如下也ok: 最后输出的结果为:欢迎Vue! 但是,需要注意的是,在使用{{}}展示或更新页面数据时:当网速比较慢时,会出现一个不好的过度现象,会让用户先看到我们的表达式(上面页面中的{{msg}}),然后才看到data中的值(欢迎Vue!)------->即所谓的闪烁问题! 二、解决这个问题的方法: 1、使用v-cloak指令,然后为其设置css样式display:none;即上述代码可修改为: Document [v-cloak]{ display: none; } {{msg}} new Vue({ el: '#app', data: { msg: '欢迎Vue!' } })说明:但有时添加完毕后变量仍会显示(即闪烁问题没解决),这是怎么回事呢?原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致,所以最好再添加一个 !important ,将其优先级设置为最高,防止被其他优先级高的dispaly:none样式所覆盖。 即: [v-cloak]{ display: none !important; }2、使用v-text解决 三、附加: 1、{{}}与v-text的区别 1》默认v-text是没有闪烁问题,{{}}存在闪烁的问题 2》 v-text会覆盖掉元素中原本的内容,但是{{}}只会替换自己的这个占位符。 如下示例展示可以直观的说明: {{}}示例 Document [v-cloak]{ display: none; } ¥{{msg}}元 new Vue({ el: '#app', data: { msg: '100' } })最后输出的结果为:¥100元 v-text示例: Document ¥元 new Vue({ el: '#app', data: { msg: '100' } })最后输出的结果为:100 2、{{}}、v-text与v-html的区别 1》前两个向页面渲染普通文本,后者向页面输出html。 2》与v-text一样,v-html也会覆盖掉元素中原本的内容。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |