weex開發-使用weex-ui繫結事件源注意事項
阿新 • • 發佈:2018-12-21
在使用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最基礎的語法。