Vue的一些修饰符

it2026-08-12  12

vue修饰符 1…stop 阻止冒泡

<div> <input type="button" value="点击" @click.stop="btnHandler"> </div> //@click.stop就阻止了这个Input点击事件冒泡到外面的div上

2.prevent 阻止事件默认行为 3.capture捕获机制 就是和冒泡机制相反,冒泡机制是从里到外,捕获机制是从外到里,先执行外层再执行里层 4.self也就是不管冒泡和捕获机制,就是自己事件的触发,就不会因为冒泡受影响 5.once就是只触发一次事件处理函数 stop只是阻止当前元素的冒泡,但是不阻止其他元素的冒泡,self只会阻止自己身上冒泡行为的触发,但是不会真正阻止冒泡行为

vue如何使用内联样式 1.直接在元素上通过:style的形式,书写样式对象

<div :style="{color:'red','font-weight':'22px'}"> hello world </div> 对象就是无序键值对的集合 如果键名带有-线,就用单引号引起来

2.将样式对象定义在data中,并直接引用到:style里

<div :style="obj"> hello world </div> 在data中 obj:{color:'red','font-weight':'22px'}

3.在:style中通过数组,引用多个data中的样式对象

<div :style="[obj1,obj2]"> hello world </div> 在data中 obj1:{color:'red','font-weight':'22px'}, obj2:{color:'red','font-weight':'22px'}

指令v-model和数据双向绑定 可以实现表单元素和model中数据双向绑定

注意:只能运用在表单元素中 input(radio,text,address,email) select checkbox textarea

eval会解析字符串并执行其中的代码

v-for key指令 遍历数组循环

in后面可以放数组,对象数组,对象,还可以放数字,如果迭代数字,索引值会先从1开始

key来指定标识唯一身份

v-if 和v-show 显示与隐藏元素 v-if 和v-show v-if每次都会删除元素(消耗性能)v-show会切换元素(有较高的初始渲染)

最新回复(0)