uniapp中的數(shù)據(jù)綁定

1. 前言

在實(shí)際開發(fā)過程中，data 中定義的變量發(fā)生改變后，頁面的數(shù)據(jù)也需要實(shí)時更新是一個很常見需求。這個需求的應(yīng)用就是數(shù)據(jù)綁定的知識。
數(shù)據(jù)綁定還有許多其他的應(yīng)用場景，也有多種表現(xiàn)形式。本小節(jié)我們來學(xué)習(xí)一下各種數(shù)據(jù)綁定的場景以及應(yīng)用。

2. 插值表達(dá)式 {{}}

插值表達(dá)式的表現(xiàn)形式就是兩個大括號 {{}}，我們將 data 中定義的變量放到插值表達(dá)式中，當(dāng)變量發(fā)生變化時，頁面上面顯示的數(shù)據(jù)也會實(shí)時更新。
實(shí)例：

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

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

在插值表達(dá)式中也可以使用表達(dá)式。
實(shí)例：

<span>{{ 1+1 }}</span>
<span>{{ flag ? '我是慕課網(wǎng)': '我不是慕課網(wǎng)' }}</span>

3. v-bind 動態(tài)綁定屬性

插值表達(dá)式只在 HTML 的文本部分生效，如果 HTML 標(biāo)簽屬性也想做數(shù)據(jù)綁定，就需要用到 v-bind 來做動態(tài)綁定。
實(shí)例：

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

    <!-- 縮寫 -->
    <image :src="imgUrl"></image>

    <!-- 也可以使用表達(dá)式。當(dāng)isShow 變量為 true 時，顯示圖片；為 false 時，不顯示圖片 -->
    <image :src="isShow ? imgUrl : '' "></image> 
  </view>
</template>

<script>
    export default{
        data(){
            imgUrl:'/static/imooc.png',
            isShow:true
        }
    }
</script>

也可以使用 v-bind 來做動態(tài)樣式的綁定。
實(shí)例：

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

當(dāng) isRed 為 true 時，class 為 font-red，顯示「我是紅色」文本
當(dāng) isRed 為 false 時，class 為 font-green，顯示「我是綠色」文本

4. v-on 事件綁定屬性

我們用 v-on 來進(jìn)行 HTML 事件綁定，事件函數(shù)定義在 methods 中，v-on: 可以省略寫為 @。
實(shí)例：

<template>
  <view>
    <!-- 完整語法 -->
    <button v-on:click="showName()">點(diǎn)我顯示名字</button>

    <!-- 簡寫 -->
    <button @click="showName()">點(diǎn)我顯示名字</button>
  </view>
</template>

<script>
    export default{
        methods: {
          showName () {
            console.log("我是imooc")
          }
        }
    }
</script>

5. v-for 循環(huán)綁定屬性

我們用 v-for 來循環(huán)顯示 data 數(shù)據(jù)，需要搭配 :key 屬性，不然會報錯。
實(shí)例：

<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 實(shí)現(xiàn)這些標(biāo)簽數(shù)據(jù)的雙向綁定。
實(shí)例：

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

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

6.2 <picker> 普通選擇器

也就是 H5 的 select 標(biāo)簽，用 :value 綁定 data 變量，當(dāng)選項(xiàng)發(fā)生變化時，綁定的 data 變量 index 也會發(fā)生變化。
實(shí)例：

<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("當(dāng)前選擇名字的索引是：",e.detail.value)
    }
  }
}
</script>

屬性說明：

6.3 <radio-group> 單項(xiàng)選擇器

@change 屬性，在 <radio-group>中的選中項(xiàng)發(fā)生變化時觸發(fā)，內(nèi)部由多個 <radio> 單選項(xiàng)目組成。
實(shí)例：

<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發(fā)生change事件，攜帶value值為：', e.target.value)
    }
  }
}
</script>

radio屬性說明：
包裹在 radio-group 下面的單選項(xiàng)目。

7. 小結(jié)

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

本節(jié)課程我們主要學(xué)習(xí)了 uni-app 中幾種類型的數(shù)據(jù)綁定。本節(jié)課程的重點(diǎn)如下：

• 了解并掌握插值表達(dá)式、v-bind 動態(tài)綁定屬性、v-on 進(jìn)行事件綁定屬性、v-for 循環(huán)綁定屬性以及表單控件綁定的語法。
• 了解各類數(shù)據(jù)綁定，以后在各類場景中可以熟練應(yīng)用。