v-cloak 作用:解决初始化慢导致页面,闪动的最佳实践
v-cloak一般和display结合使用
<div v-cloak></div>
<style>
[v-cloak]{
display: none;
}
</style>
v-once: 定义它的元素和组件只渲染一次
<p v-once>{{name}}</p>
app1.name = 'hi' // 只渲染一次
const app1 = new Vue({
el:'#app',
data:{
name: 'hello'
}
})
v-if v-else-if v-else
v-if的弊端 :vue在渲染时候,元素呢,出于考虑会尽可能的复用已有的元素而非重新渲染,因此会出现乌龙,
解决办法:加 key 表示唯一的,提供k值,可以来否定是否复用该元素
<input type="text" v-if="type===name" key="name">
v-show:显示与否取决于布尔值
<div v-show="a >1"> a 为true则显示 a <1 为 false 则不显示</div>
v-if和v-show的比较
v-if:实时渲染页面显示就渲染,不显示则就移除
v-show: v-show的元素永远存在页面中,只是改变了css的display 的属性
v-for的用法:
v-for一定要写在需要便利的元素上, v-for 后接 v-for="新的,原有的属性"
<div v-for="item in items">
{{item.name}}
</div>
new Vue({
el:"#app",
data:{
items:{
name:'lei',
age:18
}
}
}}
// item 对应的是Items复制过来的新值
// items 对应的是data上原有的items的值
v-for带有索引下标的用法
<div v-for="(item,index) in items>
item对应的是 items的值
index 是 items的值的下标
</div>
new Vue({
el:'#app',
data:{
items:[
{name:'a'},
{name:'b'}
]
}
})
v-for 拿到 value,key,index 写法
<div v-for="(value,key,index) in items">
value 对应的是值
key 对应的是健
index 对应的是下标
</div>