vue基础二

按键修饰符

在监听键盘事件时,我们经常需要判断详细的按键,此时,可以为键盘相关的事件添加按键修饰符

双向绑定指令

vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作dom的前提下,快速获取表单的数据。
v-bind是单项绑定,是数据源到页面的操作
v-model指令的三个修饰符
.number自动将用户的输入值转为数值类型
.trim自动过滤用户输入的首尾空白字符
.lazy在change时而非input时跟新
模板字符串:${字符串}

条件渲染指令

条件渲染指令用来辅助开发者按需要控制dom的显示与隐藏。条件渲染主要有两个命令:
v-if:直接移出
v-show:原理动态为元素添加或移除display:none样式,来实现元素的显示和隐藏。
注意:需要频繁的切换元素的显示状态,用v-show性能会更好。
如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好。

列表渲染指令

vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法
items 时带循环的数组
item 时被循环的每一项
v-for指令还支持一个可选的第二个参数,即当前项的索引,语法格式为(item,index)in items
注意:v-for指令中的item项和index索引都是形参,可以根据需要进行重命名
官方建议,只要用到v-for指令,那么一定要绑定一个 :key属性,而尽量把id作为key的值
key值的注意事项:
1、key的值只能是字符串或数字类型
2、key的值必须具有唯一性
3、建议把数据项id属性的值作为key的值
4、使用index的值当作key的值没有任何意义,因为index的值不具有唯一性
5、建议使用v-for指令时一定要指定key的值,即提升性能,又防止列表状态紊乱。

上一篇:UnsupportedOperationException


下一篇:第二天-力扣刷题