1 v-pre
跳过该元素及其子元素的后面的渲染,显示的初始值{{}}
<div id="app">
<div v-pre>
<div>
{{ name }}
</div>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
name : "xiaoqiang",
}
})
</script>
当我们不使用 v-pre时页面显示的数据就是hwc 但是当我们使用v-pre后他就跳过了该元素及其子元素的后面的渲染,显示的初始值
2 v-once
只会渲染一次,vue是组件化的,每一块都是一个组件,vue会进行一次缓存,后面所用到的内容都是缓存中的值
<div v-once>{{ name }}</div>
<div >{{ name }}</div>
此时页面显示的内容就是
但是当我们在控制台改变name时 上面的就不会改变
3 v-html
innerHTML 这个html片段一定是被处理过的,值得被信任的,公司中不会用,因为能够被信任代码很少 避免xss跨站脚本攻击
<div v-html="dom"></div>
var vm = new Vue({
el:"#app",
data:{
name : "xiaoqiang",
dom : "<h1>vue</h1>",
}
})
页面显示结果
与他类似的还有一个v-text innerText他是加入文字
4 v-if
控制元素是否存在
<div v-if="flag">
<div>hwc</div>
</div>
var vm = new Vue({
el:"#app",
data:{
name : "xiaoqiang",
dom : "<h1>vue</h1>",
flag : true
}
})
当flag为true时页面中就显示 该盒子
当设置为false就消失了
与他一起配对的还有 v-else 跟js中的if else 是相同的 一组必须是连续的,中间不能有插足者
<div v-if="flag">
<div>hwc</div>
</div>
<div v-else>
<div>18</div>
</div>
当上面为false时才会显示下面盒子
template
模板可以减少dom的渲染次数
<template v-if="flag">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
如果每次放入一个div像这样放入三次 就是渲染了三次 但是把它放在template中 之后渲染一次
v-show
这个跟v-if一样控制元素消失和现实 但是他俩有区别:
1.v-show是控制样式display:none,v-if是直接控制元素的是否存在
2.v-if如果初始条件为flase则连编译都没有
3.v-sho不支持template标签