c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

发布于 2020-2-22|

复制链接

vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小妖给大家带来了实例代码，需要的朋友参考下吧

vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，案例如下：vue html代码块：

```javascript

A

B

C

Not A/B/C

```

vue js代码块：

```javascript

var divApp = new Vue({

el: '#divApp',

data:

{

isActive: true,

hasError: false,

type: 'A' },

// 在 `methods` 对象中定义方法

methods: {

}

}

)

```

css 代码：

```javascript

[v-cloak]

{

display:none;

}

```

下面看下vue学习中v-if和v-show一起使用的问题 v-if和v-show一起使用在开发项目过程中v-if和v-show一起使用时，接下面跟着的v-else会在页面上面显示两次 。代码如下：

```javascript

{{index+1}}

{{item.number}}

暂无数据

```

原因其实很简单，根据vue的文档描述：当它们都处于同一节点时，v-for 的优先级高于 v-if。这意味着，v-if 将分别在循环中的每次迭代上运行。 也就是v-if会判断两次。当然这样用也有它的好处，当你只想将某些项渲染为节点时，这会非常有用，如下：(以上只渲染 todos 中未完成的项。)

```javascript

{{ todo }}

```