@tap
: 单击事件@confirm
: 回车事件@blur:
失去焦点事件@touchstart
: 触摸开始事件@touchmove
: 触摸移动事件。@touchend
: 触摸结束事件。@longpress
: 长按事件。@input
: 输入框内容变化事件。@change
: 表单元素值变化事件。@submit
: 表单提交事件。@scroll
: 滚动事件。@touchmove
: 触摸移动事件。@touchend
: 触摸结束事件。@input
: 输入框内容变化事件。@change
: 表单元素值变化事件。@submit
: 表单提交事件。@scroll
: 滚动事件。@scrolltoupper
: 滚动到顶部事件,当滚动条滚动到顶部时触发。@scrolltolower
: 滚动到底部事件,当滚动条滚动到底部时触发。@touchforcechange
: 触摸压力变化事件,当触摸设备的压力值发生变化时触发。@error
: 图片加载失败事件,在图片加载失败时触发。@load
: 图片加载成功事件,在图片加载成功时触发。@resize
: 窗口尺寸变化事件,当窗口大小发生变化时触发。@backbutton
: 后退按钮点击事件,当用户点击后退按钮时触发。......
部分案例
单击事件
<template>
<view>
<button @tap="handleTap">点击我</button>
</view>
</template>
<script>
export default {
methods: {
handleTap() {
console.log("单击事件");
}
}
};
</script>
回车事件
写法1
<template>
<view>
<input type="text" @confirm="handleConfirm" />
</view>
</template>
<script>
export default {
methods: {
handleConfirm(event) {
console.log('按下回车键');
console.log('输入框的值:', event.target.value);
}
}
};
</script>
写法2
<template>
<view>
<input type="text" v-model="inputValue" @confirm="handleEnter" />
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleEnter() {
console.log(this.inputValue); // 输出文本框内容
// 执行其他逻辑操作
// 清空文本框内容
this.inputValue = '';
}
}
};
</script>
失去焦点
<template>
<view>
<input v-model="inputValue" @blur="handleBlur" />
<text>{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleBlur() {
console.log(this.inputValue); // 获取输入框的值
// 处理失去焦点事件的逻辑
}
}
};
</script>
长按事件
<template>
<view>
<button @longpress="handleLongPress">长按按钮</button>
</view>
</template>
<script>
export default {
methods: {
handleLongPress() {
// 处理长按事件的逻辑
console.log('长按事件触发');
}
}
}
</script>