uniapp中的数据绑定

1. 前言

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

2. 插值表达式 {{}}

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

<template>
  <!-- 插值表达式中放入 71ai 这个 data 变量，当 71ai 值发生改变时，页面上面的值也会实时更新 -->
  <span> {{ 71ai }} </span>
</template>

<script>
  export default{
    data(){
      71ai: '慕课网'
    }
  }
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12

在插值表达式中也可以使用表达式。
实例：

<span>{{ 1+1 }}</span>
<span>{{ flag ? '我是慕课网': '我不是慕课网' }}</span>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2

3. v-bind 动态绑定属性

插值表达式只在 HTML 的文本部分生效，如果 HTML 标签属性也想做数据绑定，就需要用到 v-bind 来做动态绑定。
实例：

<template>
  <view>
    <!-- 完整语法 -->
    <image v-bind:src="imgUrl"/>

    <!-- 缩写 -->
    <image :src="imgUrl"></image>

    <!-- 也可以使用表达式。当isShow 变量为 true 时，显示图片；为 false 时，不显示图片 -->
    <image :src="isShow ? imgUrl : '' "></image> 
  </view>
</template>

<script>
    export default{
        data(){
            imgUrl:'/static/71ai.png',
            isShow:true
        }
    }
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

也可以使用 v-bind 来做动态样式的绑定。
实例：

<template>
<view>
        <view :class="isRed ? 'font-red' : 'font-green'" >
          {{isRed ? "我是红色" : "我是绿色"}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isRed:false,
            }
        }
    }
</script>

<style>
    .font-red{
        color: red;
    }
    .font-green{
        color: green;
    }
</style>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

4. v-on 事件绑定属性

我们用 v-on 来进行 HTML 事件绑定，事件函数定义在 methods 中，v-on: 可以省略写为 @。
实例：

<template>
  <view>
    <!-- 完整语法 -->
    <button v-on:click="showName()">点我显示名字</button>

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

<script>
    export default{
        methods: {
          showName () {
            console.log("我是71ai")
          }
        }
    }
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. v-for 循环绑定属性

我们用 v-for 来循环显示 data 数据，需要搭配 :key 属性，不然会报错。
实例：

<template>
    <view>
       <view v-for="(item,index) in arr" :key="index">
          我的名字是:{{item.name}},我{{item.age}}岁啦~
       </view>
    </view>
</template>

<script>
    export default{
        data(){
           arr: [{
                        name: "小慕课",
                        age: 5
                    },
                    {
                        name: "大慕课",
                        age: 25                    ,
                    },
                    {
                        name: "老慕课",
                        age: 55,
                    }
                ]
    }
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

会在页面上面打印下面的信息：

我的名字是:小慕课,我5岁啦~
我的名字是:大慕课,我25岁啦~
我的名字是:老慕课,我55岁啦~
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3

6. 表单控件绑定

6.1 `<input>` 表单元素

使用 v-model 实现这些标签数据的双向绑定。
实例：

<template>
    <view>
       输入名称： <input @input="replaceInput" v-model="changeValue">
    </view>
</template>

<script>
    export default {
        data() {
            return {
                changeValue:"我是慕课"
            }
        }
    }
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6.2 `<picker>` 普通选择器

也就是 H5 的 select 标签，用 :value 绑定 data 变量，当选项发生变化时，绑定的 data 变量 index 也会发生变化。
实例：

<template>
  <view>
    <picker @change="chooseName" :value="index" :range="names">
      <view>
        我的名字是：{{names[index]}}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      names: ['小慕课', '大慕课', '老慕课']
    }
  },
  methods: {
    chooseName (e) {
      console.log("当前选择名字的索引是：",e.detail.value)
    }
  }
}
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

属性说明：

属性名	类型	说明
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> 单选项目组成。
实例：

<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>

<script>
export default {
  data () {
    return {
      items: [
        {name: '0', value: '小慕课'},
        {name: '1', value: '大慕课', checked: 'true'},
        {name: '2', value: '老慕课'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件，携带value值为：', e.target.value)
    }
  }
}
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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