海口网站如何制作_文创产品设计展板_百度快照功能_新闻网最新消息

1、事件监听：可以使用@符号或者v-on来监听对应的事件，下面是程序示例：

//绑定点击事件
<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同级别，下面是程序示例：

<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是其数据绑定，可以缩写为“：”，下面是程序示例：

//绑定属性
<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>