v-cloak (掩盖) 防止页面加载时闪烁 配合 [v-cloak]{display: none;} 使用
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id='demo'>
<div v-cloak>
{{msg}}
</div>
</div>
</body>
<script>
while(true){
}
var app = new Vue({
el:'#demo',
data:{
msg:'clock防止页面加载时闪烁'
}
})
</script>
复制代码
v-once 定义元素或组件只渲染一次
<body>
<div id='demo'>
<div v-once>
{{oncedata}}
</div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
oncedata:'定义它的元素或组件'
}
})
</script>
'当再控制台 这是 设置app.oncedata='appppp' 不会生效'
复制代码
条件渲染
v-if
<body>
<div id='demo'>
<div v-cloak>
{{msg}}
</div>
<div v-once>
{{oncedata}}
</div>
<div>
'如果 v-if 为真 后两条都不会执行'
'如果 v-if 为假 则不会显示第一条 按顺序执行第二条 如果v-else-if为真不会执行第三条'
'如果前两条都为假 则会执行三条'
<p v-if="6<3">{{meay}}</p>
<p v-else-if="9>6">{{kelou}}</p>
<p v-else>{{headSet}}</p>
</div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
meay:'①结果是true(if)',
kelou:'②(v-else-if)',
headSet:'③结果为false(else)'
}
})
</script>
复制代码
一个切换输入框的小例子
<body>
<div id="demo">
<div v-if="type==='name'">
用户名：<input type="text" placeholder="用户名">
</div>
<div v-else>
密码：<input type="password" placeholder="密码">
</div>
<button @click="onclickbutton"> 切换</button>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
},
methods:{
onclickbutton:function(){
this.type=(this.type==='name'?'password':'name')
}
}
})
</script>
复制代码
- v-if 的弊端 会复用已经有的元素 而不是重新渲染 例如上面的例子 只重新渲染了 用户名和密码 这几个字 而input输入框并没有重新渲染
- 解决复用元素的问题 给可能复用的元素 标签加个key='唯一的key'
v-show 类似于 v-if
<p v-show="9>100">v-show</p>
'如果 条件 为flase 输出的DOM解构如下'
<p style="display: none;">v-show</p>
<p v-show="9>1">v-show</p>
'如果条件为true DOM解构'
<p >v-show</p>
复制代码
- v-if 条件为真 DOM 解构会显示 条件为false DOM不会出现