When binding event sources to weeX-UI controls, pay attention to the binding of event sources. Beginners need extra attention. For a simple example, take WXC-Stepper.

<template> <div class="wrapper"> <div class="demo"> <text class="text"> No configuration :</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"> disable </text> <wxc-stepper default-value="4" step="2" Max ="10" min="2" :disabled="isDisabled"></wxc-stepper> </div> <div class="demo"> <text class="text"> Input read-only :</text> <wxc-stepper: 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>Copy the code

The above code comes from WEEX-UI.

If you want to bind a network request with default-value=”4″,

default-value="item.index"
Copy the code

No content is displayed because there is no binding.

:default-value="item.index"
Copy the code

The V-bind directive can be used to update HTML features in a responsive manner, so you should always use V-bind when you need to dynamically bind data. This is the basic syntax of VUE.