uni-app基本的数据绑定v-bind,v-for,v-on:click

v-bind动态绑定属性

1.在data中定义了一个属性img,是图片路径,把这个图片路径绑定到image中用于展示,利用v-bind进行渲染

复制代码
<image v-bind:src="img"></image>

还可以缩写成

复制代码
<image  :src="img"></image>

v-for的使用

data中定义一个数组,最终将数组渲染到页面上,利用v-for进行循环

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

添加key的绑定是为了适配小程序,如果不需要index,可以直接写成

复制代码
<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方法没有传参,但是method里面定一个方法有一个参数e,那么这个参数e就为点击事件中的内容

复制代码
<button v-on:click="click(20)"></button>

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

如果button中的方法click传递了参数,而且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>
相关推荐
中微子4 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102419 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y35 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁42 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry42 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录43 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟44 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui