weex开发-使用weex-ui绑定事件源注意事项

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CodingFire/article/details/84141286

在使用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最基础的语法。