uni-app数据绑定与事件处理：v-bind、v-for及@click详解

v-bind动态绑定属性

首先，在data选项中定义一个名为img的属性，其值为图片路径。通过v-bind指令将该路径绑定至image组件的src属性，从而实现图片的动态展示与渲染。

<image v-bind:src="img"></image>

此外，v-bind指令支持语法简写，可直接使用冒号（:）代替完整写法。

<image  :src="img"></image>

v-for的使用

在data中定义一个数组，利用v-for指令遍历该数组，并将数据循环渲染至页面。

<view v-for="(item,index) in arr"  :key="index"></view>

在v-for循环中绑定key属性是适配小程序运行的关键步骤。若无需使用索引index，可直接将key绑定为数组项的唯一标识，例如item.id。

<view v-for="item in arr"  :key="item.id"></view>

若需为button组件添加点击交互，可使用v-on:click指令监听点击事件。

<button v-on:click="click()"></button>

methods: {
            click(e){
				console.log(e)
			}
		}

当button绑定的click方法未传递参数，而methods中定义的方法接收一个参数e时，该参数e将自动接收点击事件对象的内容。

<button v-on:click="click(20)"></button>

methods: {
            click(e){
				console.log(e)
			}
		}

若button的click方法传递了具体参数（如数值20），且methods中定义的方法仅接收一个参数e，则该参数e将直接获取传递的值20。若需同时传递参数并获取点击事件对象，可采用特定写法。

<button v-on:click="click(20,$event)"></button>

methods: {
            click(num,e){
				console.log(e)
			}
		}

通过传入$event参数，可在methods方法中同时获取传递的值（如num为20）与点击事件对象（e包含事件内容）。

v-on:click指令可简写为@click，具体用法如下所示。

<button @click="click(20,$event)"></button>

至此，关于uni-app基本数据绑定v-bind、v-for及v-on:click的讲解结束。如需了解更多uni-app数据绑定相关内容，建议查阅本站往期文章或继续浏览后续教程，感谢支持！