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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS入门-状态管理

View(UI)&#xff1a;UI渲染&#xff0c;指将build方法内的UI描述和Builder装饰的方法内的UI描述映射到界面。 State&#xff1a;状态&#xff0c;指驱动UI更新的数据。用户通过触发组件的事件方法&#xff0c;改变状态数据。状态数据的改变&#xff0c;引起UI的重新渲染。 装…

18-else

## 八.else --- 循环可以和else配合使用,else下方缩进的代码指的是当循环正常结束之后要执行的代码. ### 8.1while...else --- 需求:女朋友生气了,要惩罚:连续说5遍媳妇我错了,如果道歉正常完毕女朋友就原谅我了,这个程序该怎么写? python i 1 while i < 5: pri…

C语言中常用的排序

一. 冒泡排序 对相邻两个元素的值进行两两比较&#xff0c;若发现逆序则交换&#xff0c;使值较大的元素逐渐从前移向后部&#xff0c;就如水底下的气泡一样逐渐向上冒。 void bubbleSort(int arr[], int n) {for (int i 0; i < n - 1; i) {for (int j 0; j < n - i …

C# Nmodbus,EasyModbusTCP读写操作

Nmodbus读写 两个Button控件分别为 读取和写入 分别使用控件的点击方法 ①引用第三方《NModbus4》2.1.0版本 全局 public SerialPort port new SerialPort("COM2", 9600, Parity.None, 8, (StopBits)1); ModbusSerialMaster master; public Form1() port.Open();…

audit审计超详细介绍,常见审计规则示例,与syslog、secure对比

Audit&#xff08;审计&#xff09;介绍 Audit&#xff08;审计&#xff09;在Linux系统中&#xff0c;特别是CentOS中&#xff0c;是一个用于监控和记录系统上各种操作的技术手段。Audit的主要功能是为系统管理员提供一个跟踪系统上与安全相关信息的方法。根据预配置的规则&a…

UWA Gears正式上线,助力移动平台性能优化

亲爱的开发者朋友们&#xff0c; 我们非常激动地向大家宣布&#xff0c;UWA最新的无SDK性能分析工具 - UWA Gears&#xff0c;现已正式发布&#xff01;无论您使用的是哪种开发引擎&#xff0c;这款工具都能轻松应对&#xff0c;为您的项目保驾护航。更令人心动的是&#xff0c…

后台管理系统登录安全和权限要求

一、前言 几乎所有的系统都有后台管理系统&#xff0c;后台登录需要账号和密码&#xff0c;后台管理员权限需要有控制。所有管理员的操作都应该有操作日志。 二、存在的问题 现在很多系统只需要账号和密码就能登录&#xff0c;有的还是简单账号和简单密码&#xff0c;就是弱口…

虚拟机之ip配置,ssh连接到虚拟机

右边是我的虚拟机&#xff0c;左边是我使用vscode来连接&#xff08;终端也可以。然后注意vscode配置后点一下刷新&#xff0c;不会自动刷新的QA&#xff09;&#xff08;吐槽一下&#xff0c;虚拟机都不能复制内容呢&#xff0c;确实仿真&#xff0c;centos仿真就是因为没有图…

二手车小程序

本文来自&#xff1a;FastAdmin二手车小程序 - 源码1688 一款基于ThinkPHPFastAdmin开发的原生微信小程序二手车管理系统。 前端小程序码&#xff1a; 后台演示地址&#xff1a; https://facars.site100.cn/OHNYSKzuba.php/carswxsys/sysinit?refaddtabs

解决springboot的跨域冲突

前言 赶时间的可以直接加入地下的配置文件&#xff0c;就可解决问题。上面从概念讲起。 概念 在Web开发中&#xff0c;浏览器出于安全考虑&#xff0c;默认不允许从一个源加载页面的同时通过XMLHttpRequest发起对不同源的请求。例如&#xff0c;一个运行在http://example.co…

视觉巡线小车——STM32+OpenMV(四)

目录 前言 一、整体控制思路 二、代码实现 1.主函数 2.定时器回调函数 总结 前言 通过以上三篇文章已将基本条件实现&#xff0c;本文将结合以上内容&#xff0c;进行综合控制&#xff0c;实现小车的视觉巡线功能。 系列文章请查看&#xff1a;视觉巡线小车——STM32OpenMV系列…

【轨物方案】电表红外抄表物联网装置

对于光伏运维工程师来说&#xff0c;电表抄表是一件并不陌生的工作&#xff0c;不过很多并网电表的RS485通讯接口一般都被占用了&#xff0c;并且电表的外壳也被铅封起来。在这种情况下电站通常采用人工抄表的方式采集电量数据&#xff0c;这种方式费时费力&#xff0c;对电站运…

京东科技集团将在香港发行与港元1:1挂钩的加密货币稳定币

据京东科技集团旗下公司京东币链科技(香港)官网信息&#xff0c;京东稳定币是一种基于公链并与港元(HKD) 1:1挂钩的稳定币&#xff0c;将在公共区块链上发行&#xff0c;其储备由高度流动且可信的资产组成&#xff0c;这些资产安全存放于持牌金融机构的独立账户中&#xff0c;通…

【OpenCV C++20 学习笔记】扫描图片数据

扫描图片数据 应用情景图像数据扫描的难点颜色空间缩减&#xff08;color space reduction&#xff09;查询表 扫描算法计算查询表统计运算时长连续内存3种扫描方法C风格的扫描方法迭代器方法坐标方法LUT方法 算法效率对比结论 应用情景 图像数据扫描的难点 在上一篇文章《基…

OAK-FFC 分体式相机使用入门介绍

概述 OAK FFC 主控板和多种可选配镜头模组非常适合灵活的搭建您的3D人工智能产品原型。由于镜头是分体式的&#xff0c;因此你可以根据需要测量的距离&#xff0c;自定义深度相机安装基线&#xff0c;并根据你的项目要求&#xff08;分辨率、快门类型、FPS、光学元件&#xff…

微前端--qiankun(3)

微前端–qiankun(3) 微前端的运行原理 监听路由变化匹配子应用加载子应用渲染子应用 监听路由变化 window.onhashchange 和window.addEventListener(popstate,() > {})等等&#xff0c;下篇文章我写个 匹配子应用 const currentApp apps.find(app > window.locati…

FPGA教程|零基础到实战的全方位指导

在数字化时代&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;作为一种灵活的硬件编程平台&#xff0c;正逐渐成为电子工程师和计算机科学家必备的技能之一。无论你是电子专业的学生&#xff0c;还是职场中的工程师&#xff0c;掌握FPGA开发技术&#xff0c;都将为你…

前端与HTML

前端与HTML 什么是前端&#xff1f; 解决GUI人机交互问题跨终端&#xff08;PC/移动浏览器&#xff09;&#xff08;客户端小程序&#xff09;&#xff08;VR/AR等&#xff09;Web技术栈 前端工程师&#xff1a;利用web技术栈解决多端图形界面用户交互的工程师 前端技术栈 …

CDGA|数据治理:安全如何贯穿数据供给、流通、使用全过程

随着信息技术的飞速发展&#xff0c;数据已经成为企业运营、社会管理和经济发展的核心要素。然而&#xff0c;数据在带来巨大价值的同时&#xff0c;也伴随着诸多安全风险。因此&#xff0c;数据治理的重要性日益凸显&#xff0c;它不仅仅是对数据的简单管理&#xff0c;更是确…

Lua 类管理器

Lua 类管理器 -- ***** Class Manager 类管理*****‘local ClassManager {}local this ClassManagerfunction ClassManager.Class(className, ...)print(ClassManager::Class)--print(className)-- 构建类local cls {__className className}--print(cls)-- 父类集合local …