数据绑定-uniapp入门教程

当前位置:　首页>> 技术小册>> uniapp入门教程

### 1. 前言
在实际开发过程中，data 中定义的变量发生改变后，页面的数据也需要实时更新是一个很常见需求。这个需求的应用就是数据绑定的知识。
数据绑定还有许多其他的应用场景，也有多种表现形式。本小节我们来学习一下各种数据绑定的场景以及应用。

### 2. 插值表达式 {{}}
插值表达式的表现形式就是两个大括号 {{}}，我们将 data 中定义的变量放到插值表达式中，当变量发生变化时，页面上面显示的数据也会实时更新。
实例：
```html
<template>
  
  <span> {{ imooc }} </span>
</template>

```

在插值表达式中也可以使用表达式。
实例：
```html
<span>{{ 1+1 }}</span>
<span>{{ flag ? '我是uniapp': '我不是uniapp' }}</span>

```

### 3. v-bind 动态绑定属性
插值表达式只在 HTML 的文本部分生效，如果 HTML 标签属性也想做数据绑定，就需要用到 v-bind 来做动态绑定。
实例：
```html
<template>
  <view>
    
    <image v-bind:src="imgUrl"/>

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

<image :src="isShow ? imgUrl : '' "></image> 
  </view>
</template>

```

也可以使用 v-bind 来做动态样式的绑定。
实例：
```html
<template>
<view>
        <view :class="isRed ? 'font-red' : 'font-green'" >
          {{isRed ? "我是红色" : "我是绿色"}}
        </view>
    </view>
</template>

```
当 isRed 为 true 时，class 为 font-red，显示「我是红色」文本
当 isRed 为 false 时，class 为 font-green，显示「我是绿色」文本

### 4. v-on 事件绑定属性
我们用 v-on 来进行 HTML 事件绑定，事件函数定义在 methods 中，v-on: 可以省略写为 @。
实例：
```html
<template>
  <view>
    
    <button v-on:click="showName()">点我显示名字</button>

<button @click="showName()">点我显示名字</button>
  </view>
</template>

```
### 5. v-for 循环绑定属性
我们用 v-for 来循环显示 data 数据，需要搭配 :key 属性，不然会报错。
实例：
```html
<template>
    <view>
       <view v-for="(item,index) in arr" :key="index">
          我的名字是:{{item.name}},我{{item.age}}岁啦~
       </view>
    </view>
</template>

```
会在页面上面打印下面的信息：
```html
我的名字是:小慕课,我5岁啦~
我的名字是:大慕课,我25岁啦~
我的名字是:老慕课,我55岁啦~

```

### 6. 表单控件绑定
**6.1 `<input>` 表单元素**
使用 v-model 实现这些标签数据的双向绑定。
实例：
```html
<template>
    <view>
       输入名称： <input @input="replaceInput" v-model="changeValue">
    </view>
</template>

```
**6.2` <picker>` 普通选择器**
也就是 H5 的 select 标签，用 :value 绑定 data 变量，当选项发生变化时，绑定的 data 变量 index 也会发生变化。
实例：
```html
<template>
  <view>
    <picker @change="chooseName" :value="index" :range="names">
      <view>
        我的名字是：{{names[index]}}
      </view>
    </picker>
  </view>
</template>

```
属性说明：

| 属性名           | 类型          | 说明                              |
|---------------|-------------|---------------------------------|
| range         | Array       | 数组中包含了所有选项的内容                   |
| value         | Integer     | 表示当前选择的是range对应项中的第几个（下标从 0 开始） |
| @change       | EventHandle | value 改变时触发 change 事件           |
| @columnchange | EventHandle | 某一列的值改变时触发 columnchange 事件      |
| @cancel       | EventHandle | 取消选择时触发                         |
| disabled      | Boolean     | 是否禁用                            |

6.3 `<radio-group>` 单项选择器
@change 属性，在 `<radio-group>`中的选中项发生变化时触发，内部由多个 `<radio>` 单选项目组成。
实例：
```html
<template>
  <view>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </view>
</template>

```
radio属性说明：
包裹在 radio-group 下面的单选项目。

| 属性名      | 类型       | 说明                                   |
|----------|----------|--------------------------------------|
| value    | String   |  的唯一标识。被选中时， 的 change 事件会携带  的 value |
| checked  | Boolean  | 当前是否选中                               |
| disabled | Boolean  | 是否禁用                                 |
| color    | radio的颜色 |

### 7. 小结
数据绑定是一个比较重要的知识点，在开发过程中经常会用到，希望大家能好好研究这一小节，最好自己敲写一下代码，让自己更加了解并掌握数据绑定的各种类型以及应用情况。

本节课程我们主要学习了 uni-app 中几种类型的数据绑定。本节课程的重点如下：

了解并掌握插值表达式、v-bind 动态绑定属性、v-on 进行事件绑定属性、v-for 循环绑定属性以及表单控件绑定的语法。
了解各类数据绑定，以后在各类场景中可以熟练应用。

该分类下的相关小册推荐：

uni-app零基础入门