1、事件监听:可以使用@符号或者v-on来监听对应的事件,下面是程序示例:
javascript
//绑定点击事件
<template>
<view>
<button @click="handleClick">点击我</button>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('按钮被点击了!');
}
}
}
</script>
//绑定输入事件
<template>
<view>
<input type="text" @input="handleInput" placeholder="请输入内容" />
</view>
</template>
<script>
export default {
methods: {
handleInput(event) {
console.log('输入内容:', event.detail.value);
}
}
}
</script>
//绑定触摸事件
<template>
<view>
<view @touchstart="handleTouchStart">触摸这里</view>
</view>
</template>
<script>
export default {
methods: {
handleTouchStart(event) {
console.log('触摸开始', event.touches[0].clientX, event.touches[0].clientY);
}
}
}
</script>
2、v-if:可以通过此方法来控制是否要显示,使用template则可以让让里面的image、view与box同级别,如果将template换成view则是box和view同级别,下面是程序示例:
javascript
<view class="box1" v-if="false">
<image src="../../static/pic1.png"mode=""></image>
</view>
<view class="box2" v-show="false">
<image src="../../static/pic2.png"mode=""></image>
</view>
<template v-if="true">
<image src="../../static/logo.png"mode=""></image>
<view>logo</view>
</template>
<template v-else>
<image src="../../static/pic4.jpg" mode=""></image>
<view>pic4</view>
</template>
3、数据绑定:v-bind是其数据绑定,可以缩写为":",下面是程序示例:
javascript
//绑定属性
<view v-bind:class="dynamicClass"></view>
<view :class="dynamicClass"></view>
//绑定样式
<view v-bind:style="{ color: textColor, fontSize: '16px' }"></view>
<view :style="{ color: textColor, fontSize: '16px' }"></view>
//绑定多个属性
<view v-bind="{ id: 'item-' + item.id, class: dynamicClass }"></view>
<view :="{ id: 'item-' + item.id, class: dynamicClass }"></view>