内部指令:
1d8d0465-285c-4a8b-a8bf-4c24d67d4fdd.jpg

v-if:
根据条件在DOM中生成或者移除一个元素
v-show:

显示或者隐藏HTML元素(display:none)

两者对比:

v-if 是惰性的,如果初始渲染条件为假,则什么也不做,在条件第一次变为真时才开始局部编译(编译会被缓存起来)
v-show则简单的多,元素始终编译并保留只是基于CSS切换
总之v-if 有更高的切换消耗,v-show有更高的初始渲染消耗,因此如果频繁切换则v-show,条件不大可能改变则使用v-if。

v-else:

必须跟着v-if或者v-show,充当else功能

v-model:

用来在input,select,text,checkbox,redio等表单控件元素上创建双向数据绑定。
v-model指令后还可以添加多个参数(number,lazy,debounce)
number:将用户输入自动转换成数字类型
lazy:<input v-model="msg" lazy>{{msg}},加入lazy 属性后即使我们输入 msg的值依然没有发生变化。
debounce:设置一个最小的延时,在每次敲击之后延时同步输入框的值和数据,减小高耗操作

v-for
基于源数组重复渲染即可用v-for
eg:<li v-for='(item,index) in items' :key=index><li/>


Jackie龙
51 声望2 粉丝

Any application that can be written in javeScript,will eventually be written in javeScript