版权声明:本文为博主原创文章,未经博主允许不得转载。 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最基础的语法。