uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一模一样，直接在data中定义数据即可

export default {data () {return {msg: 'hello-uni'}}
}

插值表达式的使用

利用插值表达式渲染基本数据
```
<view>{{msg}}</view>
```

在插值表达式中使用三元运算

<view>{{ flag ? '我是真的':'我是假的' }}</view>

基本运算
```
<view>{{1+1}}</view>
```

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {data () {return {img: 'http://destiny001.gitee.io/image/monkey_02.jpg'}}
}

利用v-bind进行渲染

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

还可以缩写成:

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

v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {return {arr: [{ name: '刘能', age: 29 },{ name: '赵四', age: 39 },{ name: '宋小宝', age: 49 },{ name: '小沈阳', age: 59 }]}
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {tapHandle () {console.log('真的点我了')}
}

事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {tapHandle (e) {console.log(e)}
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {tapHandle (num) {console.log(num)}
}

如果获取事件对象也想传递参数

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {tapHandle (num,e) {console.log(num,e)}
}

uni-app中的数据绑定相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
Android开发之关于MVVM架构中视图数据绑定框架dataBinding的基本用法
dataBinding是Google官方开发的第三方视图数据绑定框架.优缺点如下: 优点:很好用缺点:调试bug不易,部分AS版本中不太友好首先说下如何使用: 在gradle中的android模块 ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
js 取得input绑定的datalist中的值_javascript基础修炼(9)——MVVM中双向数据绑定的基本原理...
[小宅按] 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Pag ...

uni-app中的数据绑定

uni-app中的数据绑定

插值表达式的使用

v-bind动态绑定属性

v-for的使用

uni中的事件

事件绑定

事件传参

uni-app中的数据绑定相关推荐

最新文章

热门文章