Uni-App方向:侦听器、事件修饰符及事件映射表
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Uni-App方向:侦听器、事件修饰符及事件映射表相关的知识,希望对你有一定的参考价值。
参考技术A 监听对象的某一属性(非深层次)监听深层次嵌套的数据内容
事件修饰符
.sync修饰符
事件处理器(事件映射表)
Vue 知识整理—03-指令3
一:v-on的缩写和事件修饰符
事件修饰符:
. stop 阻止冒泡
. prevent 阻止默认事件
. capture 添加事件侦听器时使用事件捕获模式
. self只当事件在该元素本身(比如不是子元素)触发时触发回调
. once 事件只触发一次
二:v-model和双向数据绑定
v-bind只能实现数据的单向绑定,从 M 到 V ,v-model 可以实现数据的双向绑定,表单元素和 Model中的数据
注意:v-model 只能运用在表单元素中
{ input(radio ,text ,address ,email 。。。) select checkbox textarea}
三:v-bind 属性设置样式
~~~ vue中通过属性绑定(v-bind:)为元素设置 class 样式
---使用 class 样式
1. 直接传递一个数组
2. 数组中使用三元表达式
3. 在数组中使用对象代替三元表达式(数组中嵌套对象)
4. 直接使用对象
~~~ vue中通过属性绑定(v-bind:)为元素绑定 style 行内样式
---使用内联样式
1. 直接在元素上设置 : style
2. 将样式定义到 data 中,直接引用到 : style 中
3. 在 : style 中通过数组,引用多个 data 上的样式对象
四:v-for 的四种使用方式(与key属性)
2. v-for
指令需要使用 item in items
形式的特殊语法,
3.
是源数据数组 /对象
4. 当要渲染相似的标签结构时用v-for
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
-
-
数组 语法: v-for="(item,i) in list"
-
对象 语法: v-for=“(v,k,i) in obj”
-
补充 : 在每一项数据 追加一个属性 :key=“唯一标识” 建议如果有ID使用ID没有考虑索引
<body> <div id="app"> <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染 v-for="元素 in 容器(数组和对象)" v-for="数组中的元素 in data中的数组名" v-for="对象中的属性值 in data中的对象名" --> <!-- 数组 --> <p v-for="item in list">{{item}}</p> <hr> <p v-for="(item,index) in list">{{item}}----{{index}}</p> <!-- (v,i) in 数组 v:数组中的每个元素 i:数组中元素的下标 --> <hr> <!-- 对象 --> <!-- (v,k,i)in 对象 v:值 k:键 i:对象中每对key-value的索引 从0开始 注意: v,k,i是参数名,见名知意即可! --> <p v-for="value in per">{{value}}</p> <hr> <p v-for="(value,key) in per">{{value}}----{{key}}</p> <hr> <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: ‘#app‘, data: { list: [‘a‘, ‘b‘, ‘c‘], per: { name: ‘老王‘, age: 38, gender: ‘男‘ } }, methods: { } }) </script> </body>
以上是关于Uni-App方向:侦听器、事件修饰符及事件映射表的主要内容,如果未能解决你的问题,请参考以下文章