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>
相关推荐
MrGaoGang23 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭36 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
跟橙姐学代码39 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom44 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌1 小时前
Web3基础
前端
RoyLin1 小时前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端
stoneship3 小时前
Web项目减少资源加载失败白屏问题
前端