uniapp中的數據綁定

1. 前言

在實際開發過程中，data 中定義的變量發生改變后，頁面的數據也需要實時更新是一個很常見需求。這個需求的應用就是數據綁定的知識。
數據綁定還有許多其他的應用場景，也有多種表現形式。本小節我們來學習一下各種數據綁定的場景以及應用。

2. 插值表達式 {{}}

插值表達式的表現形式就是兩個大括號 {{}}，我們將 data 中定義的變量放到插值表達式中，當變量發生變化時，頁面上面顯示的數據也會實時更新。
實例：

<template>
  <!-- 插值表達式中放入 imooc 這個 data 變量，當 imooc 值發生改變時，頁面上面的值也會實時更新 -->
  <span> {{ imooc }} </span>
</template>

<script>
  export default{
    data(){
      imooc: '慕課網'
    }
  }
</script>

在插值表達式中也可以使用表達式。
實例：

<span>{{ 1+1 }}</span>
<span>{{ flag ? '我是慕課網': '我不是慕課網' }}</span>

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/imooc.png',
            isShow:true
        }
    }
</script>

也可以使用 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>

當 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("我是imooc")
          }
        }
    }
</script>

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>

會在頁面上面打印下面的信息：

我的名字是:小慕課,我5歲啦~
我的名字是:大慕課,我25歲啦~
我的名字是:老慕課,我55歲啦~

6. 表單控件綁定

6.1 <input> 表單元素

使用 v-model 實現這些標簽數據的雙向綁定。
實例：

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

<script>
    export default {
        data() {
            return {
                changeValue:"我是慕課"
            }
        }
    }
</script>

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>

屬性說明：

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>

radio屬性說明：
包裹在 radio-group 下面的單選項目。

7. 小結

數據綁定是一個比較重要的知識點，在開發過程中經常會用到，希望大家能好好研究這一小節，最好自己敲寫一下代碼，讓自己更加了解并掌握數據綁定的各種類型以及應用情況。

本節課程我們主要學習了 uni-app 中幾種類型的數據綁定。本節課程的重點如下：

• 了解并掌握插值表達式、v-bind 動態綁定屬性、v-on 進行事件綁定屬性、v-for 循環綁定屬性以及表單控件綁定的語法。
• 了解各類數據綁定，以后在各類場景中可以熟練應用。