v-if 条件渲染 通过v-if指令 结合js表达式返回值 决定一个dom元素是否存在
1>标签一般成对使用 标签之间不能有其他不相关的标签阻隔 否则报错
2> 通过条件判断 控制标签是否在页面上显示 但是条件不匹配的标签 不会出现在dom节点上
3>key值的作用
Vue在重新渲染页面的时候 会尝试复用页面上已经存在的dom 给某个元素标签加上key值之后 Vue会认为
这是页面上唯一的元素，key值不一样 重新渲染页面的时候 Vue就不会尝试复用了 此处与 虚拟dom有关
v-if与v-show的区别
v-show作用类似于v-if 通过条件判断 控制模板标签在页面上显示 v-if为false的不匹配的标签 dom上不存在该标签节点
v-show 指令 条件不匹配的标签节点 还在dom上 只不过是display:none
在需要经常改变dom元素 隐藏显示的效果时 v-show性能更高 不会频繁的在dom上 删除 增加节点
<body>
<div id="app">
<div v-if="str == 'a'">This is A</div>
<div v-else-if="str == 'b'">This is B</div>
<div v-else>This is others</div>
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
str:"a" ,
}
})
</script>
</body>
v-if的 key值
<body>
<div id="app">
<div v-if="str == false">
用户名:<input type="text" />
</div>
<div v-else>
手机号:<input type="text" />
</div>
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
str:false ,
}
})
</script>
</body>
Vue在重新渲染页面的时候 会尝试复用页面上已经存在的dom 给某个元素标签加上key值之后 Vue会认为
这是页面上唯一的元素，key值不一样 重新渲染页面的时候 Vue就不会尝试复用了 此处与 虚拟dom有关
v-show
作用类似于v-if 通过条件判断 控制模板标签在页面上显示 v-if为false的不匹配的标签 dom上不存在该标签节点
v-show 指令 条件不匹配的标签节点 还在dom上 只不过是display:none
在需要经常改变dom元素 隐藏显示的效果时 v-show性能更高 不会频繁的在dom上 删除 增加节点
<div id="app">
<div v-if="str" data-test="if">{{content}}</div>
<div v-show="str" data-test="show">{{content}}</div>
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
str:false ,
content:"Hello Vue"
}
})
</script>
</body>
3080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
