1. 程式人生 > >weex開發-使用weex-ui繫結事件源注意事項

weex開發-使用weex-ui繫結事件源注意事項

在使用weex-ui提供的控制元件繫結事件源的時候,一定要注意事件源的繫結。新手更需要額外注意,簡單舉個例子,就拿wxc-stepper來說,使用方法如下:

<template>
  <div class="wrapper">
    <div class="demo">
      <text class="text">無配置:</text>
      <wxc-stepper></wxc-stepper>
    </div>
    <div class="demo">
      <text class="text">{min:2,max:10,step:2,defaultValue:4}</text>
      <wxc-stepper default-value="4"
                   step="2"
                   max="10"
                   min="2"
                   @wxcStepperValueChanged="stepperValueChange"></wxc-stepper>
    </div>
    <div class="demo">
      <text class="text">禁用</text>
      <wxc-stepper default-value="4"
                   step="2"
                   max="10"
                   min="2"
                   :disabled="isDisabled"></wxc-stepper>
    </div>

    <div class="demo">
      <text class="text">input只讀:</text>
      <wxc-stepper :read-only="isOnlyRead"></wxc-stepper>
    </div>
  </div>
</template>

<script>
  import { WxcStepper } from 'weex-ui';
  export default {
    components: { WxcStepper },
    data: () => ({
      value: 4,
      isDisabled: true,
      isOnlyRead: true
    }),
    methods: {
      stepperValueChange (e) {
        console.log(e.value);
      }
    }
  };
</script>

以上程式碼來自weex-ui。

如果你想把default-value="4"通過網路請求的資料進行繫結,

default-value="item.index"

但是發現沒有任何內容顯示出來,原因是沒有進行繫結,需要這麼寫:

:default-value="item.index"

具體可以檢視vue中的描述
v-bind 指令可以用於響應式地更新 HTML 特性
所以需要動態繫結資料的時候一定要使用v-bind,這也是vue最基礎的語法。