vuejs里面v-if,v-show和v-for
2024-09-01 07:50:25
<div id='root'>
<div v-if='show'>helle world</div>
<button @click='handleClick'>toggle</button>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
v-if，里面这个show是个变量，如果是true就是显示，如果是false就不显示，这里是移除了dom
<div id='root'>
<div v-show='show'>helle world</div>
<button @click='handleClick'>toggle</button>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
v-show，把v-show替换掉v-if，表现形式一样，但是和v-if不同的是，v-show只是将dom隐藏，显示，并没有移除dom，只是把display的样式变了
如果显示的频率大，v-show比v-if要性能高一些，因为不会去销毁dom，和创建dom,如果显示的频率不是那么大，只要一次显示隐藏，那么v-if是更好的选择
<div id='root'>
<ul>
<li v-for='item of list' :key='item'>{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
list:[1,2,3]
}
})
</script>
v-for,当某个数据需要循环显示的时候，可以用v-for,这里需要注意加:key，可以提升性能，但是这个item变量要是唯一的，如果数组是[1,1,3]，这个item就不能作为key值，需要将
v-for='item of list'
改成
v-for='(item,index) of list'，
将索引index作为key值，这样是唯一的，但是index作为key值，在对列表排序等操作的时候可能存在问题
最新文章
- Code Lock[HDU3461]
- 未解决的问题，登录163邮箱http://mail.163.com/，用xpath的方式定位密码输入框的时候，总是报找不到该元素
- linux tar命令的使用
- 机器学习&数据挖掘笔记_18（PGM练习二：贝叶斯网络在遗传图谱在的应用）
- XSS quiz练习题做题过程及感悟
- ROS语音识别
- 不加班的实践(1)——这真的该用try-catch吗？
- poj 3318 Matrix Multiplication 随机化算法
- bzoj 2815 [ZJOI2012]灾难（构造，树形DP）
- jQuery AJAX load() 方法
- 辗转相除法_欧几里得算法_java的实现（求最大公约数）
- LeetCode_Convert Sorted Array to Binary Search Tree
- HDU 1021 - Fibonacci Again
- POJ 1459-Power Network（网络流-最大流-ISAP）C++
- C# FileSystemWatcher 并发
- UML类图关系(转,添加了实例)
- HTML常用技术
- 关于《数据结构》课本KMP算法的理解
- [Application]Ctrl+C终止程序代码
- Memcached CAS 命令