Vue.js中的判断与循环

继续学习Vue。

v-show与v-if

v-show的用法和v-if非常相似,也用于决定一个元素是否被渲染。在开发中选择的依据是:v-if当条件为false时,根本不会有对应的元素在DOM中。v-show当条件为false时,仅仅是将元素的display属性设置成none,即DOM中有这个元素,但是CSS设置为不显示。当需要在显示与隐藏之间切换很频繁时,使用v-show,当只有一次切换时,使用v-if。

循环遍历

第一种情况是遍历数组。在遍历的过程中可以获取索引值,也可以直接遍历。

v-for="item in xxx"这样只有一项的,就代表索引项。

v-for="(index, i) in name"这样有两项的,前一项代表索引项,后一项代表索引值。项数再增加则没有效果。

还有一种情况是遍历对象,输出每一个成员。js当中的对象是以键-值的形式出现的,如果只获取一个值,那么获取到的就是value,如果获取两个值,就会先获取value再获取key。如果此时还需要index,那就获取三个值,第三个值就是序号。

官方推荐在使用v-for时,给对应的元素或组件加上一个:key属性,为什么需要这个key?和Vue的虚拟DOM的Diff算法有关系。当某一层有很多相同的结点时,也就是列表结点时,我们希望插入一个新的结点。我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:把C更新成F,D更新成C,E更新成D,最后插入E,这样效率比较低。所以需要用key来给每一个结点做一个唯一标识,Diff算法就可以正确的识别此结点,找到正确的位置区插入新的结点。一句话总结,key的作用就是为了高效的更新虚拟DOM。

在Vue中,数据是响应式的,Vue会实时监听数据的变化,当数据变化时,会先改变虚拟DOM,然后虚拟DOM改变真实DOM,在网页上看到的显示就会改变。

push pop shift unshift splice sort reverse这些方法是支持响应式的。

push 从最后插入元素 ,可以一次加好几个

pop 从最后删除元素

shift 删除第一个元素

unshift 在数组最前面添加元素,可以一次加好几个

splice可以删除/插入/替换元素。第一个参数代表要从哪个位置开始进行操作,这个是必须要传入的。第二个参数代表一直删除到哪个位置,如果不写默认一直删除到最后。如果准备替换的话,第二个参数表示要替换几个元素。再往后传若干个值,会先按删除做,然后把那些值加进去。如果准备添加,第二个参数置为0,后面写要插入的元素。

sort对数组排序

reverse对数组逆序

注意,直接通过索引值修改元素不是响应式的,应尽量避免这种操作。如果要修改元素要使用splice。或者使用set。

使用方式:Vue.set(要修改的对象, 索引值, 修改后的值);

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信