v-bind dynamic binding attribute
1. Define an attribute img in data, which is the image path. This image path is bound to image for display, and rendered using v-bind.
<image v-bind:src="img"></image>
Can also be abbreviated as
<image :src="img"></image>
Use of v-for
Define an array in data, and finally render the array onto the page, and loop with v-for
<view v-for="(item,index) in arr" :key="index"></view>
The binding of the key is added to adapt to the applet. If the index is not needed, it can be written directly as
<view v-for="item in arr" :key=""></view>
If you add a click event to the button, you can use v-on:click
<button v-on:click="click()"></button>
methods: {
click(e){
(e)
}
}If the click method in the button does not pass parameters, but a method has a parameter e in the method, then this parameter e is the content of the click event
<button v-on:click="click(20)"></button>
methods: {
click(e){
(e)
}
}If the method click in button passes the parameter, and the method defined in methods has only one parameter e, then this e is the value 20. If a parameter is passed and you want to get the click event, you can write it like this
<button v-on:click="click(20,$event)"></button>
methods: {
click(num,e){
(e)
}
}Use $event to get the click event, so that the parameter num in the methods method is 20, and e is the click event content
v-on:click can be abbreviated as @click, as follows
<button @click="click(20,$event)"></button>
This is all about this article about uni-app's basic data binding v-bind, v-for, v-on:click. For more related uni-app data binding content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!