vue-常见问题处理方式

一 .v-cloak 解决引用vue.js的页面加载时闪现{{}}

v-cloak 可以解决这一问题，在 css 中加上

[v-cloak] {
  display: none;
}

需要注意的是 如果这个样式被其他样式影响了 可以使用 ！important 提高优先级

在 html 中的加载点加上 v-cloak也可以在使用表达式最近的标签内加上v-cloak，就可以解决这一问题

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

为什么我用的 v-cloak 无效？

在实际项目中，我们常通过 @import 来加载 css 文件

@import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将 [v-cloak] 写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。

二、选项卡切换效果

代码如下：

<style>

.active{

color:#f00;

}

</style>

<ul id="myTab" class="nav nav-tabs">
    <li  v-for="(item ,index) in items" :class="{active:index==activeIndex

}" @click="setIndex(item.id,index)">

        <a  v-text="item.id" ></a>
    </li>
</ul>

<script>

new Vue({

el:"#..",

data:{

activeIndex:0,

arr:[....]

},

methods:{

setIndex:function(index){

this.activeIndex=index

}

}

})

</script>