20221008 Vue数据绑定、条件渲染、列表渲染、事件基础

111 阅读1分钟

数据绑定

插值语法写法:{{值或表达式}}

指令绑定写法:v-bind:属性名=‘值’,可简写为:

条件渲染

v-if:通过布尔值显示或隐藏元素

v-show:通过布尔值显示或隐藏元素

二者的区别:v-if是通过移出和添加元素实现显示或隐藏,而v-show则是通过display样式实现显示或隐藏

列表渲染

v-for:有两个值,item元素和index索引作用域是自身和其全部子元素

v-for和v-if不推荐在同一元素中一起使用,解决方法为:

把v-for提到template标签上使用

把v-if提取出来前提是v-if的表达式不需要v-for的item元素和index索引

事件基础: 

绑定 

v-on/@="函数名",arguments第o个是event

v-on/@="函数名(自定义参数,$event)" 

v-on/@=“函数名()”,没有event需要手动从传参 “